I have an array that is being looped through in js to put custom markers on a google map. I need to add a hidden info window for each marker so that when it is clicked the relevant infowindow is displayed. Currently I am doing the following:
for(var i=0; i<google_map_item.length; i++)
{
latlon = new google.maps.LatLng(google_map_item[i].lat, google_map_item[i].lon)
bounds.extend(latlon);
var iconcolor = google_map_item[i].iconColor;
marker = new google.maps.Marker({
map: map,
position: latlon,
icon: ";chld=" + (i + 1) + "|"+iconcolor+"|000000",
type: 'flat',
icon_color: '#ff0000',
label_color: '#ffffff',
width: '20',
height: '20',
label_size: '11',
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: '<b>Speed:</b> knots'
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
map.fitBounds(bounds);
}
However this only creates 1 info box that displays no matter which point you click.
Thanks for any help
I have an array that is being looped through in js to put custom markers on a google map. I need to add a hidden info window for each marker so that when it is clicked the relevant infowindow is displayed. Currently I am doing the following:
for(var i=0; i<google_map_item.length; i++)
{
latlon = new google.maps.LatLng(google_map_item[i].lat, google_map_item[i].lon)
bounds.extend(latlon);
var iconcolor = google_map_item[i].iconColor;
marker = new google.maps.Marker({
map: map,
position: latlon,
icon: "https://chart.googleapis./chart?chst=d_map_pin_letter_withshadow&chld=" + (i + 1) + "|"+iconcolor+"|000000",
type: 'flat',
icon_color: '#ff0000',
label_color: '#ffffff',
width: '20',
height: '20',
label_size: '11',
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: '<b>Speed:</b> knots'
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
map.fitBounds(bounds);
}
However this only creates 1 info box that displays no matter which point you click.
Thanks for any help
Share Improve this question edited Jul 17, 2012 at 8:08 Steve Smith asked Jul 16, 2012 at 15:11 Steve SmithSteve Smith 7526 gold badges14 silver badges29 bronze badges4 Answers
Reset to default 8Check out this blog post:
http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Basically, you are overwriting each marker object with the new marker object. You need to make each marker context-specific, using this.
Your event listener should look like:
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, this);
});
You may need to make more changes to ensure you are creating new objects for each iteration. Try this and let us know!
From the suggestions on the right: Google Maps API v3 adding an InfoWindow to each marker
Seems to be the answer you are looking for (using function closure).
Working example, infowindow content from xml
Ahhhh, this problem....
It's a tough one if you don't know what you're looking for. I had this a few months back and it was terrifyingly hard to find the right answer, whether on StackOverflow or even in the Google Maps documentation.
I don't purport to know why this code works any more than the next man, but it worked for me, and with a little bit of tweaking on your part to fit your project, it should work for you too.
Here is the code I used. There are a few artifacts from my project in there in terms of variable names, but I've tried to strip most of it out that I could, and ment out the parts which you don't need or which you can change based on your desired behavior of the InfoWindows.
function initMap(){
bldgNo = new Object(); // YOU CAN GET
bldgName = new Object(); // RID OF ANY
bldgAddr = new Object(); // OF THESE...
bldgGfx = new Object(); //
mainMeter = new Object(); // JUST REPLACE
alarmCount = new Object(); // THEM WITH
latitude = new Object(); // WHAT YOU'LL
longitude = new Object(); // NEED INSTEAD.
markersArray = [];
google.maps.Map.prototype.clearOverlays = function() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
location1 = new google.maps.LatLng(22.413543,-137.075743); // IN CASE YOU'LL NEED MORE
location2 = new google.maps.LatLng(22.628202,-137.426432); // THAN ONE LOCATION? I DID.
myOptions = {
zoom:15, // BEST IS BETWEEN 12-15
scrollwheel:false, // EITHER TRUE OR FALSE
center:location1, // ONE OF THE ABOVE LAT/LNG LOCATIONS
mapTypeId: google.maps.MapTypeId.HYBRID // ROADMAP, SATELLITE, HYBRID, or TERRAIN (all-caps)
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
icon = new google.maps.MarkerImage('images/YOUR-IMAGE-HERE.png',new google.maps.Size(20,34),new google.maps.Point(0,0),new google.maps.Point(10,34));
shadow = new google.maps.MarkerImage('images/YOUR-SHADOW-IMG.png',new google.maps.Size(37,34),new google.maps.Point(0,0),new google.maps.Point(10,34));
infowindow=new google.maps.InfoWindow();
var i=1;
$(".building").each(function(i){
bldgNo[i] = $(this).children(".bldg-no").html(); // YOU CAN GET
bldgName[i] = $(this).children(".bldg-name").html(); // RID OF ANY
bldgAddr[i] = $(this).children(".bldg-address").html(); // OF THESE...
bldgGfx[i] = $(this).children(".bldg-graphic").html(); //
mainMeter[i] = $(this).children(".main-meter").html(); // JUST REPLACE
alarmCount[i] = $(this).children(".alarm-count").html(); // THEM WITH
latitude[i] = $(this).children(".latitude").html(); // WHAT YOU'LL
longitude[i] = $(this).children(".longitude").html(); // NEED INSTEAD.
marker=new google.maps.Marker({
position:new google.maps.LatLng(
latitude[i], // (DEFINED ABOVE)
longitude[i] // (DEFINED ABOVE)
),
map:map, // THE DEFAULT
shadow:shadow, // JUST MY NAME FOR IT (DEFINED ABOVE)
icon:icon, // JUST MY NAME FOR IT (DEFINED ABOVE)
title:bldgName[i]+" \n"+bldgAddr[i], // FEEL FREE TO CHANGE THIS BASED ON WHAT YOU NEED
optimized:false // YOU MAY OR MAY NOT NEED THIS
});
marker.setAnimation(google.maps.Animation.NULL); // NULL, DROP, or BOUNCE (all-caps)
markersArray.push(marker);
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindow.setContent('
//
// INSERT INFOWINDOW CONTENT HERE
//
');infowindow.open(map,marker);
}
})(marker,i));
i++;
});
}
function updateMap(){
map.clearOverlays();
infowindow=new google.maps.InfoWindow();
var i=1;
$(".building").each(function(i){
bldgNo[i] = $(this).children(".bldg-no").html(); // YOU CAN GET
bldgName[i] = $(this).children(".bldg-name").html(); // RID OF ANY
bldgAddr[i] = $(this).children(".bldg-address").html(); // OF THESE...
bldgGfx[i] = $(this).children(".bldg-graphic").html(); //
mainMeter[i] = $(this).children(".main-meter").html(); // JUST REPLACE
alarmCount[i] = $(this).children(".alarm-count").html(); // THEM WITH
latitude[i] = $(this).children(".latitude").html(); // WHAT YOU'LL
longitude[i] = $(this).children(".longitude").html(); // NEED INSTEAD.
marker=new google.maps.Marker({
position:new google.maps.LatLng(
latitude[i], // (DEFINED ABOVE)
longitude[i] // (DEFINED ABOVE)
),
map:map, // THE DEFAULT
shadow:shadow, // JUST MY NAME FOR IT (DEFINED ABOVE)
icon:icon, // JUST MY NAME FOR IT (DEFINED ABOVE)
title:bldgName[i]+" \n"+bldgAddr[i], // FEEL FREE TO CHANGE THIS BASED ON WHAT YOU NEED
optimized:false // YOU MAY OR MAY NOT NEED THIS
});
marker.setAnimation(google.maps.Animation.NULL); // NULL, DROP, or BOUNCE (all-caps)
markersArray.push(marker);
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindow.setContent('
//
// INSERT UPDATED INFOWINDOW CONTENT HERE
//
');infowindow.open(map,marker);
}
})(marker,i));
i++;
});
}
I'm sure some kinks will need to be worked out of that, but the code I have on my puter (the version not edited for your benefit) works like a charm. If I've mistakenly made any breaks in the code when copying it over and editing it for your ease of use, just let me know and I'll update my answer.
Cheers!
Edit: By the way, this code both creates the hidden info windows (the initMap function) and updates the hidden info windows (the updateMap function). If you call the updateMap function at set intervals, it updates the information in your map, which was necessary for my project.
As such, there are code blocks which are very similar/duplicated, because I needed to delete the hidden blocks and create new ones each time the page's InfoWindows updated.
You can simplify it to your needs very easily by deleting the updateMap function and any artifacts in initMap which were created solely for manipulation in updateMap. Then just call the initMap function and you're all set!
I believe the mon practice when dealing with InfoWindow is to make a global window and bind it to click event with each marker, instead of making one for each marker. I made to make a simple app with google markers and this is what I used. Hope this helps!
var globalInfoWindow = new google.maps.InfoWindow();
var offset = new google.maps.Size(17,-10);
globalInfoWindow.setOptions({pixelOffset: offset});
.
.
.
for(var i in data.locations)
{
var latlng = data.locations[i];
var lat = Number(latlng[0]);
var lng = Number(latlng[1]);
var marker_latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: marker_latlng,
icon: markerImg,
map: map
});
// binds the showing of infowindow with click event.
google.maps.event.addListener(marker, 'click', viewLocPic);
}
.
.
.
// 'this' in the function refers to the marker itself.
function viewLocPic()
{
console.log("this refers to " + this);
globalInfoWindow.setPosition(this.getPosition());
globalInfoWindow.setContent("<img src='cycling.png'/>");
globalInfoWindow.open(map, this);
}