javascript - Adding labels and icons on google maps markers -
how can add labels 2 markers when click on marker shows more details , how can change icon of "access point 2" different marker
function initialize() { var mylatlng = new google.maps.latlng(-26.322402,31.142249), map = new google.maps.map(document.getelementbyid('google-map-default'), { zoom: 14, center: mylatlng }), marker = new google.maps.marker({ position: mylatlng, map: map, title: "we here!" }); var accesspoint1 = new google.maps.latlng(-26.315402,31.123924), marker1 = new google.maps.marker({ position: accesspoint1, map: map, title: "access point 1" }); var accesspoint2 = new google.maps.latlng(-26.316700,31.138043), marker2 = new google.maps.marker({ position: accesspoint2, map: map, title: "access point 2" }); } google.maps.event.adddomlistener(window, 'load', initialize);
#google-map-default { height: 200px; }
<div id="google-map-default"></div> <script src="https://maps.googleapis.com/maps/api/js"></script>
the code above in file called maps.mini.js working fine. need make modifications on specified above
here more robust , extendable solution makes use of array holding locations (markers), , single infowindow object. this, can add many locations need without having duplicate rest of code...
function initialize() { var mylatlng = new google.maps.latlng(-26.322402, 31.142249); var map = new google.maps.map(document.getelementbyid('map-canvas'), { zoom: 13, center: mylatlng }); var infowindow = new google.maps.infowindow(); var marker = new google.maps.marker({ position: mylatlng, map: map, title: "we here!" }); var locations = [ [new google.maps.latlng(-26.315402, 31.123924), 'access point 1', 'custom text 1'], [new google.maps.latlng(-26.316700, 31.138043), 'access point 2', 'custom text 2'] ]; (var = 0; < locations.length; i++) { var marker = new google.maps.marker({ position: locations[i][0], map: map, title: locations[i][1] }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][2]); infowindow.open(map, marker); } })(marker, i)); } } google.maps.event.adddomlistener(window, 'load', initialize);
#map-canvas { height: 200px; }
<div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js"></script>
Comments
Post a Comment