I am implementing University campus map.
I am trying to make put color on some buildings and add event on each of them.
I've tried to use marker's but it didn't work for me.
I have a sample page that provides the things what I am trying to do.
http://maps.uottawa.ca/
any idea how they made it?
I think you should try using polygons. It maybe a little bit time consuming creating the shapes, but the result could be similar. See my example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>Ottawa</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 600px;;
width: 600px;
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var infowindow;
var polyArr = [
[ [
{lat: 45.4216323644096, lng: -75.679592192173},
{lat: 45.421722258490796, lng: -75.67935079336166},
{lat: 45.421029929177294, lng: -75.67869432270527},
{lat: 45.421176302703834, lng: -75.67835435271263},
{lat: 45.42096027218897, lng: -75.67815452814102},
{lat: 45.42071082416096, lng: -75.67878015339375}
],
'#800000', '#C0C0C0', '<div><h2>Advanced Research Complex (ARC)</h2><br>25 Tempelton Street</div>'
],
[ [
{lat: 45.42114947542994, lng: -75.6796009093523},
{lat: 45.42078801197042, lng: -75.67929714918137},
{lat: 45.420673642190714, lng: -75.67935682833195},
{lat: 45.42061010332411, lng: -75.67929714918137},
{lat: 45.42055833086142, lng: -75.67939773201942},
{lat: 45.42049243856756, lng: -75.6793400645256},
{lat: 45.42044301929665, lng: -75.67946344614029},
{lat: 45.42051314758246, lng: -75.67952111363411},
{lat: 45.42050655835125, lng: -75.67953586578369},
{lat: 45.42052632604257, lng: -75.6795559823513},
{lat: 45.42045478579363, lng: -75.67973837256432},
{lat: 45.42051032362633, lng: -75.67974105477333},
{lat: 45.42051408890116, lng: -75.67976787686348},
{lat: 45.42054279911343, lng: -75.67976653575897},
{lat: 45.42054232845426, lng: -75.67974641919136},
{lat: 45.420644932045036, lng: -75.67973971366882},
{lat: 45.42075271268039, lng: -75.67983828485012},
{lat: 45.42076212582654, lng: -75.67983694374561},
{lat: 45.420867552956295, lng: -75.67992009222507},
{lat: 45.42094426989573, lng: -75.67974239587784},
{lat: 45.42088402592753, lng: -75.67968674004078}
],
'#800000', '#C0C0C0', '<div><h2>Power Plant (CTE)</h2><br>720 King Edward</div>'
]
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 45.42118901035543, lng: -75.67925691604614},
draggableCursor: 'crosshair'
});
infowindow = new google.maps.InfoWindow();
for (i = 0; i < polyArr.length; i++) {
var pBuilding = new google.maps.Polygon({
paths: polyArr[i][0],
fillColor: polyArr[i][1],
fillOpacity: 0.9,
strokeColor: polyArr[i][2],
strokeColor: polyArr[i][2],
strokeOpacity: 0.8,
strokeWeight: 3
});
pBuilding.setMap(map);
google.maps.event.addListener(pBuilding, 'click', (function(pBuilding, i) {
return function() {
infowindow.setPosition(polyArr[i][0][0]);
infowindow.setContent(polyArr[i][3]);
infowindow.open(map);
}
})(pBuilding, i));
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
Also here: https://jsfiddle.net/6y5a5bp9/
I hope it helps!
Related
I can't seem to find any documentation about updating the path of an icon (marker) in the Google Maps API. In this particular example I'm trying to change the fillOpacity of the icon from 0 to 1.
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: position,
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
this.setOptions({icon:{fillOpacity: 0.5}}); // Not working
this.setIcon({fillOpacity: 0.2}); // Not working either
});
The "icon" is an anonymous object. You need to set the whole object again:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
or:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setOptions({
icon: myIcon
});
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
I have a map in div with absolute position inside of a container that is absolute too. Also map's size is calculated from top, bottom, left and right css properties.
Clicking on polyline calls fitBounds on map, and instead of fitting it zooms out to 0.
Example is here: fiddle (to reproduse this situation enter the fullscreen mode, click on first polyline, outzoom and click on second)
Any suggestions why it's happening?
<body onload="initialize()">
<div id="map_container" style="position: absolute; width: 100%; height: 100%;">
<div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
</div>
</div>
</body>
and js code
var mapOptions = {
zoom: 7,
center: {lat: 52, lng: 12.5}
}
var firstPolylineCoordinates = [
{lat: 52, lng: 12},
{lat: 52, lng: 13}
];
var secondPolylineCoordinates = [
{lat: 51, lng: 12},
{lat: 51, lng: 13}
];
function initialize(){
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
var firstPolyline = new google.maps.Polyline({
path: firstPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
firstPolyline.setMap(map);
firstPolyline.addListener("click", function(polyMouseEvent){
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
var secondPolyline = new google.maps.Polyline({
path: secondPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
secondPolyline.setMap(map);
secondPolyline.addListener("click", function(polyMouseEvent){
bounds.extend(secondPolylineCoordinates[0]);
bounds.extend(secondPolylineCoordinates[1]);
map.fitBounds(bounds);
});
}
You are using the same bounds for the two polyline "zoom" operations. When you click on the second polyline, you end up zooming to the bounds for both polylines (which is not what you want).
Declare the bounds variable inside the polyline click listener functions:
firstPolyline.addListener("click", function(polyMouseEvent){
var bounds = new google.maps.LatLngBounds();
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
proof of concept fiddle
code snippet:
var mapOptions = {
zoom: 7,
center: {lat: 52, lng: 12.5}
}
var firstPolylineCoordinates = [
{lat: 52, lng: 12},
{lat: 52, lng: 13}
];
var secondPolylineCoordinates = [
{lat: 51, lng: 12},
{lat: 51, lng: 13}
];
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var firstPolyline = new google.maps.Polyline({
path: firstPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
firstPolyline.setMap(map);
firstPolyline.addListener("click", function(polyMouseEvent) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
var secondPolyline = new google.maps.Polyline({
path: secondPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
secondPolyline.setMap(map);
secondPolyline.addListener("click", function(polyMouseEvent) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(secondPolylineCoordinates[0]);
bounds.extend(secondPolylineCoordinates[1]);
map.fitBounds(bounds);
});
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="initialize()">
<div id="map_container" style="position: absolute; width: 100%; height: 100%;">
<div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
</div>
</div>
</body>
The generated path is composed of series of circles. I want it to be a line. Thanks!
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map, polylineOptions:{strokeColor: '#98c28a',
strokeOpacity: 0,
strokeWeight: 4,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#98c28a',
fillOpacity: 1,
scale: 2,
strokeColor: '#98c28a',
strokeOpacity: 1,
},
offset: '0',
repeat: '10px'
}]}, suppressMarkers:true });
Remove the icons from your Polyline definitions, and make the strokeOpacity non-zero
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map,
polylineOptions:{
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4
},
suppressMarkers:true
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
polylineOptions: {
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4,
},
suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: "New York, NY",
destination: "Boston, MA",
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="TestMap.aspx.cs" Inherits="TestMap" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap">
</script>
<script type="text/javascript">
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {icon: 'images/pUmjb.jpg'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
</script>
MAP:
<div style="width:800px; height:500px" id="map"></div>
</asp:Content>
I am trying to use v3 of the google maps api, and it's all working fine so far, except that I can't seem to get the toolbar for the drawing tools to show on the map. Here is the code for a very simplified WebForm. I'm guessing that I'm just missing one parameter or one line of code somewhere, but I just can't seem to make it work.
Only include the API one time. If you want/need to use a key (it is recommended but not required), include it in the parameters of the single include. The sensor parameter is no longer required.
(update: keys are now required)
<script src="http://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap" type="text/javascript" async defer></script>
code snippet:
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'images/pUmjb.jpg'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
<div id="map"></div>
This code loads lat/lng data from an array, and creates markers in a loop as the index advances. With each loop iteration, an event listener is created for each marker which should delete that marker on a click event using marker.setMap(null). The markers are placed properly in the map, but clicking on any of them deletes the final marker in the array, instead of the marker that was clicked on. I would expect such behavior if the event listener were placed after the loop, picking up only the last marker, but it is inside the loop. It seems straightforward, but I can't figure out what the problem is after trying many variations. Thanks for any help!
<!DOCTYPE html>
<html>
<head>
<title>deleteMarkerTest.html</title>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#map-canvas, #map_canvas {height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markersToSet = [
{lat: 33.037430,lng: -117.090111,title: "1765"},
{lat: 33.038330,lng: -117.090195,title: "1766"},
{lat: 33.038013,lng: -117.087593,title: "1767"},
{lat: 33.035110,lng: -117.088516,title: "1768"},
{lat: 33.034447,lng: -117.089729,title: "1769"}
];
function initialize() {
var mapCenter = new google.maps.LatLng(33.037380,-117.090431);
var mapOptions = {
zoom: 16,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.TRAFFIC
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (i = 0; i < markersToSet.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markersToSet[i].lat, markersToSet[i].lng),
title: markersToSet[i].title,
map: map
});
google.maps.event.addListener(marker, 'click', function(event) {
marker.setMap(null);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
The marker variable is left pointing to the last marker (so it gets deleted). Simplest way to fix it is to use function closure to associate the marker with the click event:
<!DOCTYPE html>
<html>
<head>
<title>deleteMarkerTest.html</title>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#map-canvas, #map_canvas {height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markersToSet = [
{lat: 33.037430,lng: -117.090111,title: "1765"},
{lat: 33.038330,lng: -117.090195,title: "1766"},
{lat: 33.038013,lng: -117.087593,title: "1767"},
{lat: 33.035110,lng: -117.088516,title: "1768"},
{lat: 33.034447,lng: -117.089729,title: "1769"}
];
function initialize() {
var mapCenter = new google.maps.LatLng(33.037380,-117.090431);
var mapOptions = {
zoom: 16,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.TRAFFIC
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (i = 0; i < markersToSet.length; i++) {
createMarker(markersToSet[i].lat,markersToSet[i].lng,markersToSet.title);
}
}
function createMarker(lat, lng,title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: title,
map: map
});
google.maps.event.addListener(marker, 'click', function(event) {
marker.setMap(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
working example