Recently, I’ve been working with the Google Maps API in order to plot locations that are stored as custom post type meta data in the WordPress database.
The general functionality is as follows:
- For each of the locations stored in the database
- Generate a pin for the location
- In addition to creating a pin, create an information window that shows the pin’s location
The information windows that sit above the flags are also called infowindow within the context of the API.
The Google Maps API documentation is pretty good in covering stuff like this, but I did run into a couple of gotchas when working with it, so I thought I’d document them here just in case anyone runs into the same problem.
Multiple InfoWindows with Google Maps
Assuming that you have the content already able to be retrieved from a JavaScript object or a JavaScript array, you can build up the HTML string and store it in a variable called, say, sContent.
It may look something like this:
Next, you’ll want to actually create the infoWindow object with this information. This is easy to do and follows exactly what the documentation specifies:
Next, I like to add the information as a proper to the marker object so that I can access it more easily when I’m with with said marker. To do that, I simply added it as an info property:
This is where it gets a little confusing. Rather than following the API’s suggestion of doing this:
We have to actually set the content of the current instance of the infoWindow but when we do this, the scope of our variables change such that this references to the current marker. This is important to understand as you’re going to be passing the info property to the infoWindow (I told you it was going to get confusing :), and you’re passing an instance of the marker to the infoWindow itself.
See the following code:
Like I said, it’s confusing.
You’re not likely to see this crop up unless you’re working with multiple pins with the Google Maps API, but I wanted to document it here just in case someone else were to run into the same problem.
Thank you so much for this tip! I spent hours trying to figure out the problem with no help. I always had ALL the infowindows showing the same content as the last one created.
Once again, thank you!
That’s awesome – glad to hear it, John! :)
Thank you very much! it is working fine.
Thank you very much! The solution to this problem was nowhere to be found, this is just what I was looking for.
Glad to hear it was helpful!
Legend.
infoWindow.setContent( this.info ); completely solved my problem when no one else could.
Hey thanks a bunch! Works great. Google should update their site.
Thank you for writing this article Tom.
I’m unclear where the actual content, specific to each marker, actually resides or how it should be called when dealing with multiple markers and their respective InfoWindows.
For example, we’re shown to include all data in a single html document when dealing with Complex Marker Icons:
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
[‘Bondi Beach’, -33.890542, 151.274856, 4],
[‘Coogee Beach’, -33.923036, 151.259052, 5],
[‘Cronulla Beach’, -34.028249, 151.157507, 3],
[‘Manly Beach’, -33.80010128657071, 151.28747820854187, 2],
[‘Maroubra Beach’, -33.950198, 151.259302, 1]
];
(reference: https://developers.google.com/maps/documentation/javascript/examples/icon-complex)
For only five markers, that seems reasonable, but not for 500.
Off the top of my head (which may not be the best place to be answering the question on a Monday morning :), you may want to look into creating a separate data structure that makes lookup much faster – something like an associative array, a hash table, or whatever other structure you have available depending on your architecture.
It’ll take some additional processing from the outset, but will save a lot of time after everything is rendered and needs to be retrieved.
Thanks a lot. That works very well and solved my problem with multiple infowindow.
Great to hear!
thanks sir tom, that’s was just like magic spell ^^
Thanks Tom.Its a nice tutorial .solved my problem
Keep Posting!!
Great – I’m glad to hear it!
Tom, forget my last post. The general idea is right but there was a big mistake. The correct code should be:
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
info: new google.maps.InfoWindow({content: sContent});
});
google.maps.event.addListener( marker, ‘click’, function() {
this.info.open(map, this);
});
Hope it helps!
Thanks for following up, I really appreciate it!
Thanks so much for this. I never leave comments but this made everything so much easier.