i trying draw rectangle on google map , detect if markers within bounds of rectangle.
to draw rectangle hold shift key, click , drag.
i have working sample here - http://jsfiddle.net/dbwpq/3/
why .contains method return true if rectangle drawn bottom left top right or top right bottom left.
and yet same area drawn top left bottom right or bottom right 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 works dont know why? http://jsfiddle.net/dbwpq/4/
it looks google.maps.rectangle.getbounds returning "invalid" bounds
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 extend empty google.maps.latlng object 2 corners, 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 statement enabled, 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 }); } } }); code snippet:
var map; var markers = {}; var bounds = null; // add marker 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(); (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 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 statement enabled, 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()); (var key in markers) { // looping through 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 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>
Comments
Post a Comment