Question

I made a few Polygons on a Google map. Now I want to add a click event to the Polygons, so that when you click the Polygon, you go to another part of the web page (that contains information about that area).

var map;
var infoWindow;

function initialize() {
    var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444);
    var myOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var poly;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var polyCoords = [
        verwissel(3.869506,50.906449),
        verwissel(3.869654,50.905664),
        verwissel(3.869934,50.904131),
        verwissel(3.870310,50.902717),
        verwissel(3.870471,50.901559),
    ];

    poly = new google.maps.Polygon({
        paths: HerzeleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    google.maps.event.addListener(Poly, "click", href ="www.google.com");

This is what is would look like, but I dont know how it works.

Answer 1

You have to wrap the commands inside function(event) { ... }. In this case event is optional. There are several ways of redirecting to a new location, here’s one:

google.maps.event.addListener(poly, "click", function() { window.location = "http://www.google.com" });

window.location.href appears to work just as well.

I changed some variable names and numbers, and goes to Yahoo! since Google won’t load in the iframe.

http://jsfiddle.net/Njcqd/1/