I'm working with Google Maps API V3 and infoboxes, and I'm trying to set it up so that only one infobox is open at any given time.
I've seen a ton of related threads, but I can't figure out how to modify them to get them to work. I vaguely know that it needs to be bound to a
google.maps.event.addListener(map,'click',function() {
});
but that's pretty much the extent of what I could figure out.
Here's 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 should mention that I got this working with InfoWindows using this plugin, but I need to be able to style them to match a specific look and feel for a website, which is the only reason I'm even banging my head against InfoBoxes to begin with.
I would really appreciate any pointers in the right direction! Thanks in advance.
I'm working with Google Maps API V3 and infoboxes, and I'm trying to set it up so that only one infobox is open at any given time.
I've seen a ton of related threads, but I can't figure out how to modify them to get them to work. I vaguely know that it needs to be bound to a
google.maps.event.addListener(map,'click',function() {
});
but that's pretty much the extent of what I could figure out.
Here's 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 should mention that I got this working with InfoWindows using this plugin, but I need to be able to style them to match a specific look and feel for a website, which is the only reason I'm even banging my head against InfoBoxes to begin with.
I would really appreciate any pointers in the right direction! Thanks in advance.
Share Improve this question edited May 23, 2017 at 12:03 CommunityBot 11 silver badge asked Jan 24, 2013 at 2:51 PhirePhire 3982 silver badges7 bronze badges 2- Why are you creating an Infowindow when you are creating an InfoBox anyway? – Shiridish Commented Jan 24, 2013 at 3:29
- Oh, good catch, that's cruft leftover from the first iteration of that code. It's not actually doing anything, I'll ment it out of the OP. – Phire Commented Jan 24, 2013 at 3:45
3 Answers
Reset to default 4Your coding in the for loop is the culprit here. You are creating a new InfoBox every time in the loop so you are left with new InfoBox with every marker.
This code is the one that creates a new InfoBox every time in the 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 a single instance of InfoBox, write the above code before the loop, so that you are only initializing the InfoBox once.
Since boxText.innerHTML is dynamic in the above code, set this content in 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);
}
});
}
Use gmaps.js, look add marker option, plugin it's easy to use.
I believe this example is what you're looking for. It shows how to share a single info window between multiple markers.