0

So I'm using (https://mapbuildr.com/buildr) to make a map but no even with default settings and two markers this happens:

Click marker A, info window pops up. Click marker B, info window A stays up and info window B pops up. Example: https://jsfiddle.net/u4ejxnv8/

The part I am confused about is this doesn't happen on their site when demoing the map, it only happens after it is embedded into another site. I've tried in both Chrome and FF. Anyone see anything wrong with their code?

<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script> <script> google.maps.event.addDomListener(window, 'load', init); var map; function init() { var mapOptions = { center: new google.maps.LatLng(53.558461,14.581546), zoom: 12, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT, }, disableDoubleClickZoom: true, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, }, scaleControl: true, scrollwheel: true, panControl: true, streetViewControl: true, draggable : true, overviewMapControl: true, overviewMapControlOptions: { opened: false, }, mapTypeId: google.maps.MapTypeId.ROADMAP, } var mapElement = document.getElementById('test'); var map = new google.maps.Map(mapElement, mapOptions); var locations = [ ['test', 'undefined', 'undefined', 'undefined', 'undefined', 53.5520416, 14.572060800000031, 'https://mapbuildr.com/assets/img/markers/default.png'],['test2', 'undefined', 'undefined', 'undefined', 'undefined', 53.55148069132529, 14.558928704663117, 'https://mapbuildr.com/assets/img/markers/default.png'] ]; for (i = 0; i < locations.length; i++) {	if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}	if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}	if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];} if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];} if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];} marker = new google.maps.Marker({ icon: markericon, position: new google.maps.LatLng(locations[i][5], locations[i][6]), map: map, title: locations[i][0], desc: description, tel: telephone, email: email, web: web }); if (web.substring(0, 7) != "http://") { link = "http://" + web; } else { link = web; } bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link); } function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) { var infoWindowVisible = (function () { var currentlyVisible = false; return function (visible) { if (visible !== undefined) { currentlyVisible = visible; } return currentlyVisible; }; }()); iw = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { if (infoWindowVisible()) { iw.close(); infoWindowVisible(false); } else { var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='mailto:"+email+"' >"+email+"<a><a href='"+link+"'' >"+web+"<a></div>"; iw = new google.maps.InfoWindow({content:html}); iw.open(map,marker); infoWindowVisible(true); } }); google.maps.event.addListener(iw, 'closeclick', function () { infoWindowVisible(false); }); } } </script> <style> #test { height:400px; width:550px; } .gm-style-iw * { display: block; width: 100%; } .gm-style-iw h4, .gm-style-iw p { margin: 0; padding: 0; } .gm-style-iw a { color: #4272db; } </style> <div id='test'></div>

Improve this question
4
  • That code is creating a new infowindow for each marker. Where do you see it working differently? Commented Dec 17, 2015 at 17:41
  • Go make a map at mapbuildr.com. Add to random pins and it works yet the soruce they provide you with doesn't. Seems strange. I tried to inspect their page but can't find their map JS stuff. I guess am I to assume they do it different on their page than the code the provide? Commented Dec 17, 2015 at 17:57
  • Can you provide a link? I don't use mapbuldr. Commented Dec 17, 2015 at 18:04
  • mapbuildr.com/buildr/4namwx If you take the js they provide however and drop it in fiddle, it won't work the same. Commented Dec 17, 2015 at 18:10

1 Answer 1

Reset to default
1

The provided generated example contains the following issues:

  • in bindInfoWindow function the info window could be instantiated twice, which apparently is not correct since closeclick event is getting lost at some point. The line: iw = new google.maps.InfoWindow({content:html}); probably should be replaced with iw.setContent(html);
  • in bindInfoWindow function the state of info window (open/close) could not be verified properly across the markers since the instance of info window is created per every marker but only the state of info window for current marker is accessible once the marker clicked

Having said that i would suggest to modify bindInfoWindow function, in particular to create a single instance of info window in order to properly manage of info window state:

Modified example

google.maps.event.addDomListener(window, 'load', init); function init() { var mapOptions = { center: new google.maps.LatLng(53.552648,14.577468), zoom: 15, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT, }, disableDoubleClickZoom: true, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, }, scaleControl: true, scrollwheel: true, panControl: true, streetViewControl: true, draggable : true, overviewMapControl: true, overviewMapControlOptions: { opened: false, }, mapTypeId: google.maps.MapTypeId.ROADMAP, } var mapElement = document.getElementById('test'); var map = new google.maps.Map(mapElement, mapOptions); var locations = [ ['test', 'undefined', 'undefined', 'undefined', 'undefined', 53.5520416, 14.5720608, 'https://mapbuildr.com/assets/img/markers/default.png'], ['test2', 'undefined', 'undefined', 'undefined', 'undefined', 53.55179939034799, 14.569786286755402, 'https://mapbuildr.com/assets/img/markers/default.png'] ]; var iw = new google.maps.InfoWindow(); for (i = 0; i < locations.length; i++) { if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];} if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];} if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];} if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];} if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];} var marker = new google.maps.Marker({ icon: markericon, position: new google.maps.LatLng(locations[i][5], locations[i][6]), map: map, title: locations[i][0], desc: description, tel: telephone, email: email, web: web }); link = ''; bindInfoWindow(iw,marker, map, locations[i][0], description, telephone, email, web, link); } } function bindInfoWindow(iw,marker, map, title, desc, telephone, email, web, link) { google.maps.event.addListener(marker, 'click', function() { if (iw) { iw.close(); } var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4></div>"; iw.setContent(html); iw.open(map,marker); }); google.maps.event.addListener(iw, 'closeclick', function () { infoWindowVisible(false); }); }
#test { height:400px; width:550px; } .gm-style-iw * { display: block; width: 100%; } .gm-style-iw h4, .gm-style-iw p { margin: 0; padding: 0; } .gm-style-iw a { color: #4272db; }
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script> <div id='test'></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for providing a working example. I still wonder why they provide code that doesn't act the same as their embed

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.