CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Kamil Z
Kamil Z

Reputation: 663

handling clicks on overlapping elements

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.

Overlapping Circles

Upvotes: 3

Views: 1461

Answers (3)

sedran
sedran

Reputation: 3566

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
    }
}

Upvotes: 2

devmiles.com
devmiles.com

Reputation: 10014

Learn about event bubbling in HTML and javascript, you should be able to code an event listener that would work for all overlapping elements.

http://www.quirksmode.org/js/events_order.html

Upvotes: 2

Marcelo
Marcelo

Reputation: 9407

If the data for your circles comes from a database you could set the circle's clickable property to false and attach the click event handler to the map itself. Then, when a click occurs you send the lat/lon of the click to the server in an AJAX call and lookup in the database what circles cover that point. Needless to say, a spatially enabled database, (like PostgreSQL/PostGIS), would make the task a lot easier.

Upvotes: 1

Related Questions