I am able to display content on Info Window by creating InfoWindow object, however i am unable to get default link(e.g. Directions, Search nearby, Saveto & More link).

I am unable to find any method of InfoWindow object by using that i can show the above utility link in InfoWindow.

Thanks,
Rajeev Jha

I couldn’t get the multiple markers, multiple info windows to work, no matter what was said above.

When in a loop:

for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
var infowindow = new google.maps.InfoWindow({
content: "holding..."
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, maker);
});
}


This always showed the last marker that was bound to map so the info window always appeared on the last marker. Bit of a problem really.

After reading http://bit.ly/aEtHk1 it showed me the mistake everyone here has made and the actual solution!


for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
var infowindow = new google.maps.InfoWindow({
content: "holding..."
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}


Changes in bold. As you have all seen the event fires for each marker, but as you were calling infowindow.open(map, marker) javascript engine’s memory location thingymabob (not good with names) held the last reference to marker. But you had passed in the marker to the event, so by calling this in place of marker, you get what you are looking for.

Hope this helps someone out.

Colin

function createMyInfoWindow(mymarker,mycontent) {
google.maps.event.addListener(mymarker, 'click', function(){iw.setContent(mycontent);iw.open(map, mymarker);});
}
////////////////////////

This is similar to what @Alfred Laggner posted above, although simpler.
Hope this helps!

anyway a great tutorial, well done.

Can you please clarify how manage a lot of infowindows so that a behaviour is the same as it is in version 2 ?
If I use another variable for each marker (infowindow and content) then I can see another content for each marker but with click on another infowindows the previous one is still open.

If I use one varible of marker, infowindow and content for each marker than the window’s closing work well but I can see only one content.

My javascript is very basic, how can I do this?

My map is http://www.planetengineering.com.au/maptest/index.html

Bronwyn

This is a great tutorial! I was able to implement getting multiple markers on my map, but I’m having problems with the InfoWindow passing the correct text to the correct marker. It basically picks the last text that gets presented, and passes it to any marker that is clicked. Javascript is not my forte, and I have it running as echo statements in PHP. Can somebody take a look at this code and help me figure out how to make this work so that each marker gets the correct text? Thanks!

while($row = mysql_fetch_array($result))
{
echo “var marker = new google.maps.Marker({\n”;
echo ” position : new google.maps.LatLng(” . $row['latitude'] . “,” . $row['longitude'] . “),\n”;
echo ” map : map,\n”;
echo ” icon : ‘images/photo.png’\n”;
echo “});\n”;
echo “var infowindow = new google.maps.InfoWindow({\n”;
echo ” content : ‘” . addslashes($row['description']) . “‘\n”;
echo “})\n”;
echo “google.maps.event.addListener(marker, ‘click’, function() {\n”;
echo ” infowindow.open(map, marker);\n”;
echo “})\n”;
}

This code gives the following results :

var marker = new google.maps.Marker({
position : new google.maps.LatLng(32.396989,-111.004427),
map : map,
icon : ‘images/photo.png’
});
var infowindow = new google.maps.InfoWindow({
content : ‘Hill located in West Lambert Lane Park. Great 360 views of Tucson and the surrounding area.’
})
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map, marker);
})
var marker = new google.maps.Marker({
position : new google.maps.LatLng(32.420879,-110.982298),
map : map,
icon : ‘images/photo.png’
});
var infowindow = new google.maps.InfoWindow({
content : ‘Another hillside location in Oro Valley. Great views to the west for storms in the valley.’
})
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map, marker);
})

Which is good, but only the last content text gets passed to any marker I click on. Thanks for the look!

Mark

But anyhow, I was speculating that with the unwanted behavior we are all getting the event thingy-ma-bobber must work as follows:

1. You register the event
2. Something somewhere stores that you registered an event to that item
3. For the action that it takes upon click it stores a function pointer
*4.* For the arguments to this function, it stores a pointer to the arguments.

This means that when you put the function in a for loop as so:

for(var i=0; i<arr.length;++i){
google.maps.events.addListener(arr[i],'click', function(){
ActionFunction(arr[i]);
});
}

It must be the case that ActionFunction is still in the same scope, meaning that it still points to the same function with the same argument. This means that every time the for loop iterates, it gives it a pointer to the same function with the same arguments, and you only have the affect of changing what those arguments (which are just boxes that hold pointers) point to. Therefore, you get what was pointed to by those parameters on the last iteration. And thus, with the solution that Ricky came up with, it calls a regular function first, meaning that pointers to the parameters of this function are pushed on the stack on each iteration and the function is called. Each time the event is registered the last even registration is completely out of scope, and thus the API is not able to take whatever shortcut it did before.

Note: This is just an attempt for me to rationalize the behavior of the API and is complete speculation on my part. I actually have no clue and am in fact not fully satisfied with this explanation as I feel that there is a whole in my logic somewhere…

So, just curious, have you ever encountered an issue like this when using the V3 API? For those of you who used the version two API's, has anyone encountered this issue? I am just wondering if this is the intended behavior, because it seems so unintuitive…

Although there are available examples to replace the infowindow, but most of the solutions fixed size images which are not as flexible as the current infowindow.

Hope you could share some of your tricks to solve this. Thanks!

I just want to share something.

I created a markerArray variable to store the markers in the map. I also had the infoArray variable to store all the associated infowindow. (All these were done using PHP and mySql).

I tried to loop through the action listener so as to reduce the code. But I encountered the same problem as stated above. The infowindow is displayed only for the last marker. But I found a solution to this problem. And that is by adding a function inside the loop itself.

After adding all the markers from the database, I looped the markerArray and called the function addInfo with the parameters markerArray[x],infoArray[x],map.

Inside this function I added the addListener. And to my surprise, it worked.

Lastly, thanks for this tutorial. It was really helpful.


var infowindow = new google.maps.InfoWindow({
  content: '<img src="url/to/your/image/" alt="" />'
});


Todd: I agree with you that InfoWindow tabs is a very appealing feature in API v2. Start an uproar in the API forum, and maybe the API team will add it in v3! You could also add a feature request. The API is still in Beta so everything is possible.

Pamela’s version is functional, but visually non appealing with a lot of lost space.

Personally… I’ll be sticking with v2 (reluctantly).

var infowindow;
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(-42.945397, 171.565676),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(“map_canvas”),
myOptions);

setMarkers(map, days);
infowindow = new google.maps.InfoWindow({ content: “blabla”});

}

var days = [
['Day 1: Kaikoura', -42.416667, 173.683333,1,' Click here for Wikipedia'],
['Day 2-4: Nelson Lake', -41.819167, 172.8375, 2,' Click here for Wikipedia'],
['Day 5: Paparoa ',-42.083333, 171.5, 3,' Click here for Wikipedia'],
['Day 6: Okatiro ',-43.2, 170.216667, 4,' Click here for Wikipedia'],
['Day 7: Franz Josef Glacier', -43.466997, 170.191528, 5,' Click here for Wikipedia'],
['Day 8-9: Queenstown ',-45.031111, 168.6625, 6,' Click here for Wikipedia'],
['Day 10: Hollyford Track ',-44.7350590018039,168.208030237917 , 7,' Click here for Wikipedia'],
['Day 11: Milford Sound ',-44.675, 167.929444 , 8,' Click here for Wikipedia on Milford Sound'],
['Day 12: Lake Pukaki ',-44.116667, 170.166667, 9,' Click here for Wikipedia on Lake Pukaki'],
['Day 13: Mt Cook National Park ',-43.733333, 170.1 , 10,' Click here for Wikipedia on Mount Cook National Park'],
['Day 14: Christchurch ',-43.53, 172.620278 , 11,' Click here for Wikipedia']
];

function setMarkers(map, locations) {
// Add markers to the map

for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: beach[0],
zIndex: beach[3]
});
attachSecretMessage(map,marker,beach[4]);
}

};
function attachSecretMessage(map,marker,itext) {
// var infowindow = new google.maps.InfoWindow(
// { content: itext});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setcontent(itext);
// infowindow.setPosition(marker);
infowindow.open(map,marker);

});
};
//function attachSecretMessage(map,marker,itext) {
// var infowindow = new google.maps.InfoWindow(
// { content: itext
// });
// google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(map,marker);
// });
//};

Jason: There’s no onClose event to my knowledge. I think you are right there are definitely cases where an onClose event would be called for.

I tried to link an information window to a polygon in the same manner as for a marker, but failed. Can you see here http://liftstol.se/test.htm what I’m doing wrong?

Thank you in advance!

// Dick

function markerselect(id) {

map.panTo(markers[id].position);

// if tempinfowindow exists close it or whatever
// if it does not exist make it have the contents of infowindows[id]

tempinfowindow.open(map, markers[id]);
}

Thanks in advanced

I like the way that V3 is implemented in JS, but I have problem to change the layout of InfoWindow, because it has no longer the second parameter (ID) like in V2
marker.openExtInfoWindow(map, ElementID,…).
And now I can not make any CSS to change the layout of InfoWindow.
When I search the code I found that the top tag of InfoWindow is so max. what I can do is define some style for this class and child tags, but there is no diffenrence between the top left and top right corner divs (no id or class).
Any suggestions how to solve this problem or should I better return to V2 coding?