Question

On clicking a button, an AJAX request is made to the serverside which returns several polygon paths. These polygons are then drawn onto the map.

Problem: I added event handler for mouseover and mouseout events. However, they do not seem to be firing. The handler contains console.log which does not execute on mouseover. What may have caused this?

JS Code

$("#button").click(function() {
    $.getJSON(base_url + 'main/get',
                function(json) {

                    for( var i = 0; i < json.length; i++) {

                        decoded_path = google.maps.geometry.encoding.decodePath(json[i].encoded_path); 

                        var polyOptions = {
                                    strokeColor: "#4794b8", 
                                    strokeOpacity: 0.7, 
                                    strokeWeight: 1.5,
                                    fillColor: "#000",
                                    fillOpacity: 0.1,
                                    path: decoded_path, 
                                    clickable: false,
                                    map: map
                            }
                        var polygon = new google.maps.Polygon(polyOptions);
                        array_polyline.push(polygon);

                        // Add Mouseover/Mouseout Listeners
                        google.maps.event.addListener(polygon, "mouseover", function(){ console.log('Mouseover'); this.setOptions({fillOpacity: 0}); });
                        google.maps.event.addListener(polygon, "mouseout", function(){ this.setOptions({fillOpacity: 0.1}); });

                    }

        });
});

Answer 1

You need to either remove clickable: false or make it clickable: true (the default)

You dont have to bind to all events (ie click) but clickable: false disables all mouse events …