Geek Answers Handbook

Google Maps API V3: close all info boxes when opening a new one

I work with the Google Maps API V3 and infoboxes , and I'm trying to configure it so that only one infobox is open at any given time.

I saw <a href = "> a ton of related threads , but I can’t figure out how to change them to make them work. I dimly know what it should be associated with

google.maps.event.addListener(map,'click',function() { });

but that is pretty much what I could understand.

Here is my code:

 var boxList =[] function initialize() { var mapOptions = { center: new google.maps.LatLng(35.542284,-76.856), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); $(document).ready(function(){ $.getJSON('test.json', function(data) { for (i = 0; i < data.length; i++) { var item = data[i]; var myLatlng = new google.maps.LatLng(item.lat, item.longs); var contentString = item.name; // accidentally left this extraneous code in here... // var infowindow = new google.maps.InfoWindow({ // content: item.name // }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: item.name, icon: item.type + ".png" }); // end add new marker var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black;"; boxText.innerHTML = item.name; var myOptions = { content: boxText, boxStyle: { opacity: 0.75, width: "280px" }, closeBoxMargin: "12px 4px 2px 2px", }; var ib = new InfoBox(myOptions); boxList.push(ib); google.maps.event.addListener(marker,'click', (function(marker, i) { return function() { boxList[i].open(map, this); } })(marker, i)); } //end for loop }) // end getJSON }); // end jQuery } // end initialize

EDIT: I have to mention that I got this working with InfoWindows with this plugin , but I need to be able to style them to match the specific look of the website, and this is the only reason I even hit my head about InfoBoxes to get started.

I would really appreciate any pointers in the right direction! Thank you in advance.

+4
source share
3 answers

Your coding in a for loop is the culprit here. You create a new InfoBox every time in the loop so that you stay with the new InfoBox with each token.

This code is the one that creates a new InfoBox each time in a loop:

  var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black;"; boxText.innerHTML = item.name; var myOptions = { content: boxText, boxStyle: { opacity: 0.75, width: "280px" }, closeBoxMargin: "12px 4px 2px 2px", }; var ib = new InfoBox(myOptions);

So, to have one instance of InfoBox, write the above code before the loop, so that you only initialize InfoBox once.

Since boxText.innerHTML is dynamic in the code above, set this content to the AddListener function.

So the final code should be

  for (i = 0; i < data.length; i++) { var item = data[i]; var myLatlng = new google.maps.LatLng(item.lat, item.longs); var contentString = item.name; var marker = new google.maps.Marker({ position: myLatlng, map: map, title: item.name, icon: item.type + ".png" }); // end add new marker AddInfoBox(marker, contentString); //function call } //end for loop function AddInfoBox(myMarker, content) { google.maps.event.addListener(myMarker,'click',function() { ib.setContent(content); //not sure about this statement ib.open(map, this); } }); }
+4
source

Use gmaps.js , look add marker parameter , plugin is easy to use.

0
source

I believe this example is what you are looking for. It shows how to split a single info window between multiple markers.

0
source

More articles:


All Articles