Google maps drag rectangle to select markers

Question

I am trying to draw a rectangle on a google map and determine if any markers are within the rectangle.

To draw a rectangle, you hold the shift key, click and drag.

I have a working sample here - http://jsfiddle.net/dbwPQ/3/

Why does the .contains method return true only if the rectangle is drawn from bottom left to right or top right to top left.

And yet the same area, drawn from top left to right or bottom to bottom right to top left, returns false

if (boundsSelectionArea.contains(markers[key].position)) //if (gribBoundingBox.getBounds().getNorthEast().lat() <= markers[key].position.lat() && // gribBoundingBox.getBounds().getSouthWest().lat() >= markers[key].position.lat() && // gribBoundingBox.getBounds().getSouthWest().lng() <= markers[key].position.lng() && // gribBoundingBox.getBounds().getNorthEast().lng() >= markers[key].position.lng() ) { //if(flashMovie !== null && flashMovie !== undefined) { console.log("User selected:" + key + ", id:" + markers[key].id); //} } else { //if(flashMovie !== null && flashMovie !== undefined) { console.log("User NOT selected:" + key + ", id:" + markers[key].id); //} } 

UPDATE , but I don’t know why? http://jsfiddle.net/dbwPQ/4/

Answer 1

It looks like google.maps.Rectangle.getBounds returns "invalid" restrictions

 key:Vince posn:(53.801279, -1.5485670000000482) out of bnds:((55.45394132943307, -4.0869140625), (52.72298552457069, 1.7138671875)) key:Vince posn:(53.801279, -1.5485670000000482) in bnds:((52.26815737376817, -4.04296875), (55.65279803318956, 2.2412109375)) 

If you extend the empty google.maps.LatLng object with your two corners, it will work:

 google.maps.event.addListener(themap, 'mousemove', function (e) { if (mouseIsDown && shiftPressed) { if (gribBoundingBox !== null) // box exists { bounds.extend(e.latLng); gribBoundingBox.setBounds(bounds); // If this statement is enabled, I lose mouseUp events } else // create bounding box { bounds = new google.maps.LatLngBounds(); bounds.extend(e.latLng); gribBoundingBox = new google.maps.Rectangle({ map: themap, bounds: bounds, fillOpacity: 0.15, strokeWeight: 0.9, clickable: false }); } } }); 

working example

code snippet:

 var map; var markers = {}; var bounds = null; // add marker to object var posi = new google.maps.LatLng(53.801279, -1.548567); var name = 'Vince'; markers[name] = {}; markers[name].id = 1; markers[name].lat = 53.801279; markers[name].lng = -1.548567; markers[name].state = 'Online'; markers[name].position = posi; markers[name].selected = false; $(document).ready(function() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(53.801279, -1.548567), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); var infowindow = new google.maps.InfoWindow(); for (var key in markers) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(markers[key].lat, markers[key].lng), map: map }); markers[key].marker = marker; google.maps.event.addListener(marker, 'click', (function(marker, key) { return function() { infowindow.setContent(key); infowindow.open(map, marker); } })(marker, key)); } // Start drag rectangle to select markers !!!!!!!!!!!!!!!! var shiftPressed = false; $(window).keydown(function(evt) { if (evt.which === 16) { // shift shiftPressed = true; } }).keyup(function(evt) { if (evt.which === 16) { // shift shiftPressed = false; } }); var mouseDownPos, gribBoundingBox = null, mouseIsDown = 0; var themap = map; google.maps.event.addListener(themap, 'mousemove', function(e) { if (mouseIsDown && shiftPressed) { if (gribBoundingBox !== null) // box exists { bounds.extend(e.latLng); gribBoundingBox.setBounds(bounds); // If this statement is enabled, I lose mouseUp events } else // create bounding box { bounds = new google.maps.LatLngBounds(); bounds.extend(e.latLng); gribBoundingBox = new google.maps.Rectangle({ map: themap, bounds: bounds, fillOpacity: 0.15, strokeWeight: 0.9, clickable: false }); } } }); google.maps.event.addListener(themap, 'mousedown', function(e) { if (shiftPressed) { mouseIsDown = 1; mouseDownPos = e.latLng; themap.setOptions({ draggable: false }); } }); google.maps.event.addListener(themap, 'mouseup', function(e) { if (mouseIsDown && shiftPressed) { mouseIsDown = 0; if (gribBoundingBox !== null) // box exists { var boundsSelectionArea = new google.maps.LatLngBounds(gribBoundingBox.getBounds().getSouthWest(), gribBoundingBox.getBounds().getNorthEast()); for (var key in markers) { // looping through my Markers Collection // if (boundsSelectionArea.contains(markers[key].marker.getPosition())) if (gribBoundingBox.getBounds().contains(markers[key].marker.getPosition())) { //if(flashMovie !== null && flashMovie !== undefined) { markers[key].marker.setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png") document.getElementById('info').innerHTML += "key:" + key + " posn:" + markers[key].marker.getPosition() + " in bnds:" + gribBoundingBox.getBounds() + "<br>"; // console.log("User selected:" + key + ", id:" + markers[key].id); //} } else { //if(flashMovie !== null && flashMovie !== undefined) { markers[key].marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red.png") document.getElementById('info').innerHTML += "key:" + key + " posn:" + markers[key].marker.getPosition() + " out of bnds:" + gribBoundingBox.getBounds() + "<br>"; // console.log("User NOT selected:" + key + ", id:" + markers[key].id); //} } } gribBoundingBox.setMap(null); // remove the rectangle } gribBoundingBox = null; } themap.setOptions({ draggable: true }); //stopDraw(e); }); }); 

 #map { height: 500px; width: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> <div id="info"></div> 

Answer 2

I have a database of changes in the working version of geocodezip.

If you use the LatLngBounds “extension”, it will only increase, but no less, when you go inside. Therefore, I generate LatLngBounds for each mouse move to fit my requirements. (Perhaps this will be optimized differently.)

Update:. I found another problem if the user released the shift key before clicking the mouse, the grid will be tied to the map, it will be fixed in the following code.

 google.maps.event.addListener(themap, 'mousemove', function (e) { + if (mouseIsDown && (shiftPressed|| gribBoundingBox != null) ) { if (gribBoundingBox !== null) // box exists { + var newbounds = new google.maps.LatLngBounds(mouseDownPos,null); + newbounds.extend(e.latLng); + gribBoundingBox.setBounds(newbounds); // If this statement is enabled, I lose mouseUp events } else // create bounding box { gribBoundingBox = new google.maps.Rectangle({ map: themap, + bounds: null, fillOpacity: 0.15, strokeWeight: 0.9, clickable: false }); } } }); google.maps.event.addListener(themap, 'mouseup', function (e) { + if (mouseIsDown && (shiftPressed|| gribBoundingBox != null)) { mouseIsDown = 0; /*........*/ 

• Working fiddle http://jsfiddle.net/7ZxMA/4/
• demo http://fiddle.jshell.net/7ZxMA/4/show/

Update : Find another scenario that may be of interest to you.

use the button to select a card. (The user can press the "select map" button to select markers or use the shift key to select markers.)

• working script http://jsfiddle.net/7ZxMA/6/
• demo http://fiddle.jshell.net/7ZxMA/6/show/

Answer 3

You will skip the constructor of google.maps.LatLngBounds class . According to the documentation, you must pass two arguments: southwest and northeast corners. However, sometimes you go to the southeast and northwest corners. This probably affects the .contains method.