How to get markers inside an area selected by mouse drag?

Question

In Brief
I want to find all the markers which lie within a rectangular area created by dragging the mouse over the map. Is this feature supported by any jQuery plugins or something else? If not, I would like to implement this in my project. I think it would be cool.

Details
I am using Google Maps v2 because I want to support IE 6 in my project.

I am a beginner in Maps and went through the Developer's guide section and some basic demos and other SO questions.

Here is my idea so far -

• User clicks on a "Select an area" button in the controls section of the map. This calls disableDragging() and user is ready to do a selection. (May be http://code.google.com/apis/maps/documentation/javascript/v2/controls.html#Custom_Controls gives some idea how to do this)

• Then user does an area selection. The selection start and selection end points are noted and assuming these as the two opposite corners of the rectangle, the markers within it are found. But, so far I did not see any working code to get the coordinates of the clicked point. I guess it is better to go with latitude/longitude as the coordinates instead of the actual x-y coordinates. This question Google Maps API using jQuery Plugin: How to get a marker's latitude and longitude on click? discusses getting the latitude/longitudes of a marker on clicking it, but I have not successfully tried it yet.

Summary
Here are my questions again -

• How do I display a rectangular selection area over the map ? (generally slight grey and transparent in appearance)

• How to get the lat/lang(latitude/longitude) of the clicked point and then extend it to get those of the selection start and end points.

I am experienced with jQuery and if there are some nice solutions with jQuery plugins them please let me know. I saw this list of 10 jQuery Plugins for Easier Google Map Installation but not sure if any of those would help me meet my requirement.

When I have the list of markers, I would like to populate some related info inside a separate display section, so that every time the user selects some markers, corresponding information is displayed in the display section. That part should easier.

Thanks

Roark

Answer 1

You can check KeyDragZoom example under Google Maps API Demo Gallery to achieve rectangular selection feature. You can find the documentation here.

For the second problem you can use GLatLngBounds class and its containsLatLng(latlng:GLatLng) function. By setting your GLatLngBounds object to the bounds of your rectangle you can test your markers against it with containsLatLng function.

If you decide to use KeyDragZoom, adding a dragend listener to the getDragZoomObject will give you a GLatLngBounds object which you can use to test your markers against with the containsLatLng function.

map.enableKeyDragZoom();
var dz = map.getDragZoomObject();
GEvent.addListener(dz, 'dragend', function (bnds) {
  // test your markers against bnds here
});

Udder

Yes that solves the problem. For the checking part inside the dragend event above, this solution #2949986 can be followed – Roark