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

Question

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

I found a very nice solution to have multiple polygons with individual infowindows.

here is my code:

<script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8">

    var map;
    var cities = {
        "Hamburg":[
            [53.60, 9.75],
            [53.73, 10.19],
            [53.48, 10.22]
        ],
        "Hannover":[
            [52.34, 9.61],
            [52.28, 9.81],
            [52.43, 9.85]
        ],
        "Bremen":[
            [53.22, 8.49],
            [53.12, 8.92],
            [53.02, 8.72]
        ]
    };
    var opened_info = new google.maps.InfoWindow();

    function init() {
        var mapOptions = {
            zoom:8,
            center:new google.maps.LatLng(53, 9.2),
            mapTypeId:google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
        for (var c in cities) {
            var coods = cities[c]
            var polyPath = [];
            for (j = 0; j < coods.length; j++) {
                polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1]));
            }
            var shape = new google.maps.Polygon({
                paths:polyPath,
                fillColor:"#00FF00",
                fillOpacity:0.6,
            });
            shape.infowindow = new google.maps.InfoWindow(
                    {
                        content:"<b>" + c + "</b>" + "</br>",
                    });
            shape.infowindow.name = c;
            shape.setMap(map);
            google.maps.event.addListener(shape, 'click', showInfo);
        }

    }
    ;

    function showInfo(event) {
        opened_info.close();
        if (opened_info.name != this.infowindow.name) {
            this.infowindow.setPosition(event.latLng);
            this.infowindow.open(map);
            opened_info = this.infowindow;
        }
    }

</script>

It Provide also the function to close the Infowindows by clicking on the same polygon again.

Answer 3

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! :)

Answer 4

No global infowindow needed. initialize the infowindow in side the event handler works. use this protoype to check if the point is contained in an instance of the polygon in a array of polygons.

http://hammerspace.co.uk/projects/maps/

There is a functioning example at http://www.ikeepuposted.com/area_served.aspx

Answer 5

in V3, you would still use the infowindow, but with different syntax:

function initialize() {

// SOME CODE
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617),
new google.maps.LatLng(46.20538443787925, 6.136844716370282),
new google.maps.LatLng(46.20525043957647, 6.141375978638086)
];
zone_up_montblanc = new google.maps.Polygon({
    editable: false,    
    paths: mont_blanc_path_array,       
    fillColor: "#0000FF",
    fillOpacity: 0.5,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,     
    strokeWeight: 2
});
// Creating InfoWindow object
var infowindow = new google.maps.InfoWindow({
    content: ' ',
    suppressMapPan:true
});
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() {
    // MORE CODE OR FUNCTION CALLS
});
// MORE CODE

}

anywhere you feel like changing the text and displaying the infowindow:

infowindow.setContent("CLICKED me");
infowindow.open(map, zone_up_montblanc);

i have made the polygon and eventlistener global variables (by suppressing "var" in the variable declaration), so that you may alter them in other functions. that does prove tricky with the infowindow behavior. some people prefer instances of infowindow, i would rather have one global instance and alter its content on the fly. beware of the effect of variable declarations!

other addListener for polygons are quite buggy and should be tested on all major browsers before publication, especially the variations of DRAGGING and MOUSEOVER.

this has some reference: http://code.google.com/apis/maps/documentation/javascript/overlays.html