Why my infoWindow on Google Maps Javascript API doesn't work? -
i want learn embeded maps in web app. want basic feature add multiple marker, costum marker, costum infowindow,etc. have done untill add costum marker. when want set infowindow each marker, it's still not work, can me solution? thanks...
here code :
<!doctype html> <html> <head> <title>styling base map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map { margin: 0; padding: 0; height: 100%; } #legend { font-family: arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; } </style> <script> var map; function initialize() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 18, center: new google.maps.latlng(-8.704956, 115.22750), maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, position: google.maps.controlposition.top_center } }); var trafficlayer = new google.maps.trafficlayer(); trafficlayer.setmap(map); var infowindow = new google.maps.infowindow(); var iconbase = 'https://maps.google.com/mapfiles/kml/shapes/'; var icons = { parking: { name: 'parking', icon: iconbase + 'parking_lot_maps.png' }, library: { name: 'library', icon: iconbase + 'library_maps.png' }, info: { name: 'info', icon: iconbase + 'info-i_maps.png' } }; function addmarker(feature) { var marker = new google.maps.marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); } var features = [ { position: new google.maps.latlng(-8.702709, 115.224461), type: 'info' }, { position: new google.maps.latlng(-33.91539, 151.22820), type: 'info' }, { position: new google.maps.latlng(-33.91747, 151.22912), type: 'info' }, { position: new google.maps.latlng(-33.91910, 151.22907), type: 'info' }, { position: new google.maps.latlng(-33.91725, 151.23011), type: 'info' }, { position: new google.maps.latlng(-33.91872, 151.23089), type: 'info' }, { position: new google.maps.latlng(-33.91784, 151.23094), type: 'info' }, { position: new google.maps.latlng(-33.91682, 151.23149), type: 'info' }, { position: new google.maps.latlng(-33.91790, 151.23463), type: 'info' }, { position: new google.maps.latlng(-33.91666, 151.23468), type: 'info' }, { position: new google.maps.latlng(-33.916988, 151.233640), type: 'info' }, { position: new google.maps.latlng(-33.91662347903106, 151.22879464019775), type: 'parking' }, { position: new google.maps.latlng(-33.916365282092855, 151.22937399734496), type: 'parking' }, { position: new google.maps.latlng(-33.91665018901448, 151.2282474695587), type: 'parking' }, { position: new google.maps.latlng(-33.919543720969806, 151.23112279762267), type: 'parking' }, { position: new google.maps.latlng(-33.91608037421864, 151.23288232673644), type: 'parking' }, { position: new google.maps.latlng(-33.91851096391805, 151.2344058214569), type: 'parking' }, { position: new google.maps.latlng(-33.91818154739766, 151.2346203981781), type: 'parking' }, { position: new google.maps.latlng(-33.91727341958453, 151.23348314155578), type: 'library' } ]; (var = 0, feature; feature = features[i]; i++) { addmarker(feature); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(feature[i]['type']); infowindow.open(map, marker); } })(marker, i)); } var legend = document.getelementbyid('legend'); (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createelement('div'); div.innerhtml = '<img src="' + icon + '"> ' + name; legend.appendchild(div); } map.controls[google.maps.controlposition.right_bottom].push(legend); } </script> </head> <body> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api /js?callback=initialize"> </script> <div id="legend"><h3>legend</h3></div> </body> </html>
your code there. i've modified few things in order work...
1) i've added missing global variable marker (as mentioned in comments below question):
<script> var map, marker; ... 2) i've modified addmarker function assign result global variable marker not local variable marker:
function addmarker(feature) { marker = new google.maps.marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); } 3) i've modified code loops on features , creates marker , event listener each marker follows:
for (var = 0; < features.length; i++) { addmarker(features[i]); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(features[i]['type']); infowindow.open(map, marker); } })(marker, i)); } please see this plunkr working demo.
edit: point #3 above rewrote loop in more traditional way. following work:
for (var = 0, feature; feature = features[i]; i++) { addmarker(feature); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(features[i]['type']); infowindow.open(map, marker); } })(marker, i)); } all did here change line:
infowindow.setcontent(feature[i]['type']); to (note features not feature):
infowindow.setcontent(features[i]['type']); see this plunkr demo.
