Google maps : How to open an InfoWindow for a Polygon by clicking on it?

Question

Hello !

I have a simple question, but i can't find the answer in the Google Maps API documentation...

I have a map with 13 polygons drawed by the API. Here is an exemple of one of these polygons :

 var zone_up_montblanc = new GPolygon([
        new GLatLng(46.21270329318585, 6.134903900311617), 
        new GLatLng(46.20538443787925, 6.136844716370282), 
        new GLatLng(46.20525043957647, 6.141375978638086), 
        new GLatLng(46.20698751554006, 6.148050266912262), 
        new GLatLng(46.21110286985207, 6.153203229026629), 
        new GLatLng(46.21730757985668, 6.151718301267355), 
        new GLatLng(46.22092122197341, 6.153676364285801), 
        new GLatLng(46.22615123408969, 6.149844858907489), 
        new GLatLng(46.22851200024137, 6.149876939987202), 
        new GLatLng(46.22945159836955, 6.142758190170017), 
        new GLatLng(46.21735908463437, 6.141457132705133), 
        new GLatLng(46.21753573755057, 6.138058122426195), 
        new GLatLng(46.21270329318585, 6.134903900311617)
        ], "#6b1f43", 2, 0.9, "#92c87f", 0.5);

then :

  map.addOverlay(zone_up_montblanc);

Polygons appears on my map, no problem. But the thing I have to do now is to open an "InfoWindow" by clicking on each polygons (with a different content for each polygons).

Did someone have an idea or an example?

Thanks a lot for your help !

Answer 1

I will describe the solution because I haven't used the API in a while, and struggle to upload any larger amounts of code - not used to the code edit feature here. Refer to the API reference for the details.

So, lets start:

1. You are adding polygons using map.AddOverlay(), the map then stores your polygons.
2. Declare an event handler that catches clicks to the map. That event handler will be passed a GLatLng of the location clicked, and the overlay that was clicked (in your case the polygon). You can do a simple type test to decide if the overlay is a polygon.
3. In the event handler use map.openInfoWindowHtml(), passing the GLatLng supplied as the location, and the HTML content you want displayed.

It's a simple as that! You will have to look up how you attach event handlers as I don't remember the specifics off the top of my head. So things you need to look up in the API are:

• Adding event handlers to the map
• Checking the type of an overlay

You should be able to find the methods to call and all info on the api page:

http://code.google.com/apis/maps/documentation/reference.html

Good luck!

Answer 2

Hi and thanks a lot filip-fku !

thanks to your comment, i finnaly find how to do this! :-) so, if anyone search for "how to do this", here is the code snippet :

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) {
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...');
});

hope this can helps !

thanks again filip! :)