Google Map polygon is disappeared on mouseout

Question

I'm drawing polygons on a Google Map using API v3 and attaching the mouseover and mouseout events to those polygons. Basically, it's a map of 45 areas with polygons over a region.

I've drawn the two polygons on the map, but upon mouseout of the first polygon, it is disappeared. The second polygon is fine. It is likely messing up to the second one. The below is my complete source code.

<html>
<head>
    <title>GMap</title>
</head>
<body>
    <div id="gmap" style="width:1000px;height:400px"></div>
</body>
</html>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript">
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(16.798296, 96.173716)
    }
    var polyOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.6
    }
    var polyOptionsHover = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#00FF00",
        fillOpacity: 0.6
    }   
    var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

    // First Polygon    
    var $path = [
        ["16.786217","96.134233"],
        ["16.782273","96.136894"],
        ["16.777014","96.136465"],
        ["16.773809","96.135092"],
        ["16.774631","96.128397"],
        ["16.779972","96.121359"],
        ["16.785806","96.119299"],
        ["16.791148","96.119299"],
        ["16.794845","96.119900"],
        ["16.797639","96.120329"],
        ["16.798132","96.124277"],
        ["16.798214","96.127796"],
        ["16.794024","96.133547"]
    ];
    var myCoordinates = [];
    for(i=0; i<$path.length; i++){  
        myCoordinates.push(new google.maps.LatLng($path[i][0], $path[i][1]));
    }
    var pOptions    = polyOptions;              
    pOptions.path   = myCoordinates;
    var polygon     = new google.maps.Polygon(pOptions);
    polygon.setMap(map);

    google.maps.event.addListener(polygon, "mouseover", function(){
        this.setOptions(polyOptionsHover);
    });
    google.maps.event.addListener(polygon, "mouseout", function(){
        this.setOptions(polyOptions);
    });

    // Second Polygon
    var $path = [
        ["16.782437","96.137066"],
        ["16.777014","96.136723"],
        ["16.774795","96.139040"],
        ["16.772247","96.147623"],
        ["16.781040","96.147795"],
        ["16.784656","96.142902"],
        ["16.785889","96.134834"]
    ];
    var myCoordinates = [];
    for(i=0; i<$path.length; i++){  
        myCoordinates.push(new google.maps.LatLng($path[i][0], $path[i][1]));
    }
    var pOptions    = polyOptions;              
    pOptions.path   = myCoordinates;
    var polygon     = new google.maps.Polygon(pOptions);
    polygon.setMap(map);

    google.maps.event.addListener(polygon, "mouseover", function(){
        this.setOptions(polyOptionsHover);
    });
    google.maps.event.addListener(polygon, "mouseout", function(){
        this.setOptions(polyOptions);
    });     
</script>

I use the array of coordinates and loop each one because they would be retrieved from the database.

geocodezip geocodezip · Accepted Answer · 2014-02-26T14:03:40

You are storing the path in the pOptions/polyOptions object. Keep it separate. Rather than:

var pOptions    = polyOptions;              
pOptions.path   = myCoordinates;
var polygon     = new google.maps.Polygon(pOptions);
polygon.setMap(map);

do:

var polygon     = new google.maps.Polygon(pOptions);
polygon.setPath(myCoordinates);
polygon.setMap(map);

Google Map polygon is disappeared on mouseout

1 Answers