在Google Maps标记上添加标签和图标

Question

How can I add labels to my two markers so that when you click on the marker it shows you more details about it and also how can I change the icon of the "Access Point 2" to a 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 are 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 is in a file called maps.mini.js which is currently working fine. I just need to make modifications on it as specified above

Answer 1

For your marker1 you can

    var my_contentString1 = 'my text content 1... ' ;

    var my_infowindow1 = new google.maps.InfoWindow({
      content: my_contentString1
    });

    var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
    marker1 = new google.maps.Marker({
        position: accessPoint1,
        map: map,
        title: "Access Point 1"
    });

    marker1.addListener('click', function() {
      my_infowindow1.open(map, marker);
    });

do the same for marker2

Answer 2

Here is a probably more robust and extendable solution that makes use of an array holding your locations (markers), and a single InfoWindow object. With this, you can add as many locations as you need without having to duplicate the rest of the 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 are 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'] ]; for (var i = 0; i < 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> 

Answer 3

I ended up doing it this way which worked so well for me

  <script type="text/javascript"> var locations = [ ['ap7', -26.303139, 31.093508, 7], ['ap6', -26.322402, 31.142249, 6], ['ap5', -26.316700, 31.138043, 5], ['ap4', -26.315402, 31.123924, 4], ['ap3', -26.329244, 31.150478, 3], ['ap2', -26.309525, 31.134632, 2], ['ap1', -26.289923, 31.140195, 1] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: new google.maps.LatLng(-26.309525, 31.134632), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script>