handling clicks on overlapping elements

Question

I have Google Maps application that display some circles on map. Some circles are overlapping each other like you can see on image below.

I would like to display some additional info when circle is clicked. The problem is that I would like to display info about more that one circle when overlapping area is clicked.

The method of presenting this info is less important. It could be InfoWindow, or it could display in some DOM element outside the map. It doesn't matter.

The problem is how to handle click that it would trigger event on all elements under cursor.

Answer 1

First, you can add a method to Circle object so that you can check whether or not it contains the clicked point on the map:

google.maps.Circle.prototype.contains = function(latLng) {
    return this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
}

Then, you should add all circle objects that you've created to an array. Suppose this is the array I'm talking about:

var circles = new Array();

Finally, when the user clicks on a point on the map, you should get the latitude and longitude and check all elements of the array above.

var latlng = _CLICKED_LAT_LNG_OBJECT_; // Get this from your map's click event

for(var i = 0; i < circles.length; i++) {
    var _circle = circles[i];
    if( _circle.contains( latlng ) ) {
        // here, you've got a clicked circle ;)
        // do whatever you want with _circle
    }
}