Home/ Questions/Q 6184123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:28:54+00:00

I have a mouseover function on multiple polygons but when I mouseover the polygon

  • 0

I have a mouseover function on multiple polygons but when I mouseover the polygon I added first, the event listener always use the latest added polygon.

Here is my code:

EDITED after Jons suggestions. Google Maps seems to hang with this code…

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Polygon Simple</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

  function initialize() {

    var myLatLng = new google.maps.LatLng(64.75539,11.557617);
    var myOptions = {
      zoom: 5,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      disableDoubleClickZoom: true
    };

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

    var counties = [
        [ new google.maps.LatLng(65.5938045448117, 18.1841615957621), new google.maps.LatLng(65.60908024341229, 18.0771327994505), new google.maps.LatLng(65.648282356232, 17.797014589131), new google.maps.LatLng(65.6726402881329, 17.6650173420103), new google.maps.LatLng(66.05487225660011, 16.7827851638447), new google.maps.LatLng(66.0563835399301, 16.5826047275627), new google.maps.LatLng(66.30204247803511, 15.826110215697), new ... ],
        [ new google.maps.LatLng(60.2679550905311, 13.9522771739341), new google.maps.LatLng(60.1898004284838, 13.9706839102235), new google.maps.LatLng(60.2696058042898, 13.8508890937951), new google.maps.LatLng(60.4187463068127, 13.6952984208179), new google.maps.LatLng(60.4226284842923, 13.5706921611819), new google.maps.LatLng(60.448328778914, 13.4996704338411), new ... ]
    ];

    var polygons = new Array();

    for (var i = 0; i < counties.length; i++)
    {
        polygons[i] = new google.maps.Polygon({
          paths: counties[i],
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          isSelected: false
        });

        polygons[i].setMap(map);

        google.maps.event.addListener(polygons[i],'click',function(event) {
            toggleSelection(polygons[i]);
        });

        google.maps.event.addListener(polygons[i],'mouseover',function(event) {
          polygons[i].setOptions({ fillOpacity: 0.45 });
        });

        google.maps.event.addListener(polygons[i],'mouseout',function(event) {
            if (!polygons[i].isSelected)
            {
              polygons[i].setOptions({ fillOpacity: 0.35 });
            }
        });
    }
  }

  function toggleSelection(polygon)
  {
    if (polygon.isSelected)
    {
      polygon.setOptions({ fillOpacity: 0.35 });
      polygon.isSelected = false;
    }
    else
    {
      polygon.setOptions({ fillOpacity: 0.45 });
      polygon.isSelected = true;
    }
  }
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to store every polygon in an array, and then add the event listener for each element of the array. Otherwise, you’re rewriting the event listener for the latest polygon. I had to do the same with a bunch of markers in my application. It’s unfortunate for memory consumption, but as long as you aren’t dealing with hundreds of polygons then you’ll be alright.

    var polygons = new Array();

for (var i = 0; i < whatever; i++) {
    polygon[i] = new Polygon(stuff);
    event.addListener(polygon[i], moreStuff);
}
    • 0