10

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 !

1
  • You have a map with a single polygon consisting of 13 points... maybe you are after info windows for points/markers instead?
    – filip-fku
    May 17, 2010 at 3:06

5 Answers 5

7

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.

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

2
  • Glad I could help. You should probably check if the overlay clicked is in fact a polygon, otherwise this handler will also execute for markers/anything else you add to the map as overlay.
    – filip-fku
    May 19, 2010 at 1:46
  • ok, i'll make some tests with this to see what happens :) thanks again, have a nice day !
    – legibe
    May 19, 2010 at 14:08
1

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

3
  • Are you affiliated with either of those? Oct 2, 2012 at 13:18
  • I am responsible for implementing it at ikeepuposted.com
    – nebenaube
    Oct 12, 2012 at 15:43
  • OK; keep in mind it is required that you disclose that fact each time you link to your own website/product. Oct 12, 2012 at 16:51
0

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!

0

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

3
  • I am doing exactly this: google.maps.event.addListener(alertPolygon, 'click', function(ev) { console.log(ev); console.log(alertText); var infoWindow = new google.maps.InfoWindow({ content: alertText }); infoWindow.setPosition(ev.latLnt); infoWindow.open(map); }); I can see the log messages, but the infoWindow never gets displayed. Any ideas? Nov 30, 2012 at 20:48
  • @lsiden no idea. i stopped writing code for googlemaps 8 months ago because of google changes to commercial policies. BUT, i would simplify the infowindow and remove the console calls, as well as the setPosition and the last call to infowindow.open i did not see in your code a declaration to polygon click listener.
    – tony gil
    Dec 2, 2012 at 14:17
  • 1
    Thank you @tony_gil. I got it to work by updating Chrome. Worked like a charm afterwards! Dec 3, 2012 at 22:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.