check if map markers are within selected bounds

Question

I have a map with various markers and i need to be able to draw a rectangle on the map and select the markers which are within the rectangle bounds.

So far i have found some great info here: How to get markers inside an area selected by mouse drag?

I have implemented the keymapzoom plugin ok. like so

    $('#dispatcher').gmap3({action:'get'}).enableKeyDragZoom({
        boxStyle: {
          border: "dashed black",
          //backgroundColor: "red",
          opacity: 0.5
        },
        paneStyle: {
          backgroundColor: "gray",
          opacity: 0.2
        }
  });
var dz = $('#dispatcher').gmap3({action:'get'}).getDragZoomObject();
google.maps.event.addListener(dz, 'dragend', function (bnds) {
  alert(bnds);
});

This gives me the following ((lat,long),(lat,long)) format from the alert(bnds);

I need to know how i can now check if any markers are within this?

I already have an object that is storing the markers for another reason. like:

    markers[name] = {};
    markers[name].lat = lati;
    markers[name].lng = longi;

which might be useful?

I don't understand how to use the GLatLngBounds and containsLatLng(latlng:GLatLng) as suggested.

score 11 · Answer 1 · answered Jun 27 '12 at 15:50

11

Your question is tagged with the v3 version of the Maps API, so I'll assume you are using that version (which you should as v2 is deprecated). Note that some classes and methods are named different than in your question.

Bounds are represented with the LatLngBounds class. You can perform the contains method on an instance of that class to determine if a point lies within those bounds.

If you have an object with all your markers, you can loop through them and check each marker, for example:

var bounds = new google.maps.LatLngBounds(sw, ne);
for (var a in markers) {
    if (bounds.contains(new google.maps.LatLng(markers[a].lat, markers[a].lng)) {
        // marker is within bounds
    }
}

On a side note, I would store the LatLng object in the markers object when creating them. That way you don't have to create them wherever you need.

answered Jun 27 '12 at 15:50

Peter Kruithof

10,584
6
29
42

yes its v3 api. thanks for your reply Peter. so should i be able to use var bounds = new google.maps.LatLngBounds(bnds); ? – Vince Lowe Jun 27 '12 at 16:04
The constructor takes 2 arguments: southwest and northeast. Just click the link I provided. – Peter Kruithof Jun 27 '12 at 16:37
i see, so how can i get the sw and ne arguments from my bnds output? – Vince Lowe Jun 27 '12 at 18:21
You draw a rectangle on the map, right? Seems like you can use that data to calculate the lat/lng of each point, Google it. – Peter Kruithof Jun 27 '12 at 19:38
what about other polygons, a hexagon, or a circle? – Ray Apr 17 '13 at 16:32
1

@Raymond LatLngBounds is used for rectangles only (the doc says "represents a rectangle in geographical coordinates"). There is also a [Polygon class](https://developers.google.com/maps/documentation/javascript/reference#Polygon) for which you can use the [Poly](https://developers.google.com/maps/documentation/javascript/reference#poly) utility library. – Peter Kruithof Apr 18 '13 at 10:30

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

Box/Rectangle Draw Selection in Google Maps

This was my solution..

     google.maps.event.addListener(dz, 'dragend', function(e) { //important listener          
      for(var i = 0; i < markers.length; i++){ // looping through my Markers Collection       
        if(e.contains(markers[i].position))
            console.log("Marker"+ i +" - matched");
        }         
     });

edited May 23 '17 at 12:01

Community

1
1

answered Jun 28 '12 at 10:42

Vince Lowe

3,521
7
36
63

check if map markers are within selected bounds

2 Answers2

Linked

Related