Disable click on polygon

Question

I have the following code to highlight an area on google maps using the javascript v3 api.

// Maps
$(document).ready(function(){
    if($(document).find("map_canvas"))
        Maps.init();
});
var Maps = {};
//The map to display
Maps.map;
//List of markers
Maps.markers = new Array();
Maps.markers.previous;
Maps.lines = new Array();
Maps.lines.toStart;
Maps.area;
//init the map
Maps.init = function() {
    var mapOptions = {
      center: new google.maps.LatLng(-39.483715,176.8942277),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    Maps.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    google.maps.event.addListener(Maps.map, 'click', function(event){Maps.addMarker(event.latLng);});
}
//Add a marker to the maps
Maps.addMarker = function(latLng){
    var marker = new google.maps.Marker({
        position: latLng,
        map: Maps.map
    });
    Maps.markers.push(latLng);
    console.log(Maps.markers.length);
    if(Maps.markers.length > 1){
        Maps.drawLine([Maps.markers.previous, latLng]); 
    }
    Maps.markers.previous = latLng;
}

Maps.drawLine = function(path){
    var Line = new google.maps.Polyline({
        path: path,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    Line.setMap(Maps.map);
    if(Maps.markers.length > 2){
        if(Maps.lines.toStart != null)
            Maps.lines.toStart.setMap(null);
        Maps.lines.toStart = new google.maps.Polyline({
            path: [path[path.length - 1], Maps.markers[0]],
            strokeColor: "#0000FF",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        Maps.lines.toStart.setMap(Maps.map);
        if(Maps.area != null)
            Maps.area.setMap(null);
        Maps.area = new google.maps.Polygon({
            paths: Maps.markers,
            strokeColor: "#000000",
            strokeOpacity: 0,
            strokeWeight: 0,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });
        Maps.area.setMap(Maps.map);
    }
}

It works perfectly as expected an produces a result like so....

But the problem is, is that I need to add markers inside the polygon for obvious reasons. When I click on the polygon expecting a marker to be added the polygon seems to be getting the clicks and not the maps. Is there anyway to get around this? Or make it so only the map receives the clicks?

Answer 1

There is a clickable property in the polygon options. Set that to false and the polygon will ignore clicks and the event will fall through to the map.

Polygon Options