Create addListener click event for more than one shape on the Google map

Question

Look at this code: This creates four circles on the map in a same position and it creates addListener click event for each one too but I just can click on the last one. I want to fix it in a way that I can click on all of them to make setEditable(true) for each one.

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var selectedShape;

function clearSelection()
{
    if(selectedShape)
    {
        selectedShape.setEditable(false);
        selectedShape = null;
    }
}

function setSelection(shape)
{
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);    
}
</script>


<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
    var mapProp = {center:amsterdam, zoom:7, mapTypeId:google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var myArray = [];
    var myCity;

    for(var i = 0; i < 4; i++)
    {
        myCity = new google.maps.Circle({
            center:amsterdam,
            radius:20000,
            strokeColor:"#0000FF",
            strokeOpacity:0.8,
            strokeWeight:2,
            fillColor:"#0000FF",
            fillOpacity:0.4
          });


    myArray.push(myCity);

    google.maps.event.addListener(myCity, 'click', function() {setSelection(myCity)});
    myArray[i].setMap(map);

  }

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Yes it is, you need to use closures to prevent this happening. You loop 4 times, updating what `myCity` is. So you end up redefining the event listener 4 times, and it ultimately only works for the last of your circles obviously. — duncan, Oct 30 '13 at 10:04
also I'm not entirely sure how you expect this to work - 4 identically sized circles on the same location. How can you tell which one you're clicking? It'll surely just act on the top one on the stack. I could understand if you had 4 circles at different cities — duncan, Oct 30 '13 at 10:08
I move the first circle and then when I want to move other circle their setEditable is disable Dunacan. — UserMat, Oct 30 '13 at 10:16

score 5 · Accepted Answer · answered Oct 30 '13 at 10:14

5

Use this instead of myCity :

google.maps.event.addListener(myCity, 'click', function() {
   setSelection(this)
});

Using setSelection(myCity) will refer to the last myCity created.

answered Oct 30 '13 at 10:14

davidkonrad

77,311
15
189
243

I'm starter. Could you please tell me what "this" is here? – UserMat Oct 30 '13 at 10:23
1

here `this` points to the local scope, the object (myCity) that actually is clicked on (or passed to the event handler) - using myCity you will accidently refer to myCity in the outside scope (ultimately the global scope), the last myCity created in your loop. I am not so good to describe such things in english - here is a really good answer on what `this` is under different circumstances http://stackoverflow.com/questions/3127429/javascript-this-keyword – davidkonrad Oct 30 '13 at 10:29

Create addListener click event for more than one shape on the Google map

1 Answers1