javascript - Display map markers inside area -

- April 15, 2010

i have large number of locations stored in database want display on google map when inside specified area. have of functionality want working, route searchable between 2 places , map markers in database showing on map.

the part unsure of how display markers inside boxpolys created routeboxer. pulling in locations static json file testing purposes.

 var map = null;   var boxpolys = null;   var directions = null;   var routeboxer = null;   var distance = null; // km     function initialize() {       var mapoptions = {       center: new google.maps.latlng(54.604008, -5.930415),       maptypeid: google.maps.maptypeid.roadmap,       zoom: 8     };       var input = document.getelementbyid('from');     var autocomplete = new google.maps.places.autocomplete(input);     var input2 = document.getelementbyid('to');     var autocomplete2 = new google.maps.places.autocomplete(input2);         map = new google.maps.map(document.getelementbyid("map"), mapoptions);     routeboxer = new routeboxer();       directionservice = new google.maps.directionsservice();     directionsrenderer = new google.maps.directionsrenderer({       map: map     });     }     function mapmarkers() {       $.getjson('empdata.json', function(data) {       var json = data;       (var = 0; < json.length; i++) {         var obj = json[i];           var marker = new google.maps.marker({           position: new google.maps.latlng(obj.latitude, obj.longitude),           map: map,           title: obj.sitename         });         marker.addlistener('click', function() {           infowindow.open(map, marker);         });           }     });   }         function route() {     // clear previous route boxes map     clearboxes();       // convert distance box around route miles km     distance = parsefloat(document.getelementbyid("distance").value) * 1.609344;         var request = {       origin: document.getelementbyid("from").value,       destination: document.getelementbyid("to").value,       travelmode: google.maps.directionstravelmode.driving     }       // make directions request     directionservice.route(request, function(result, status) {       if (status == google.maps.directionsstatus.ok) {         directionsrenderer.setdirections(result);           // box around overview path of first route         var path = result.routes[0].overview_path;         var boxes = routeboxer.box(path, distance);         drawboxes(boxes);       } else {         alert("directions query failed: " + status);       }     });     mapmarkers();   }     // draw array of boxes polylines on map   function drawboxes(boxes) {     boxpolys = new array(boxes.length);     (var = 0; < boxes.length; i++) {       boxpolys[i] = new google.maps.rectangle({         bounds: boxes[i],         fillopacity: 0,         strokeopacity: 1.0,         strokecolor: '#000000',         strokeweight: 1,         map: map       });     }   }     // clear boxes on map   function clearboxes() {     if (boxpolys != null) {       (var = 0; < boxpolys.length; i++) {         boxpolys[i].setmap(null);       }     }     boxpolys = null;   }

* {    box-sizing: border-box;  }  body {    height: 100%;    width: 100%;    padding: 0;    margin: 0;    font: 16px"source sans", helvetica, arial, sans-serif;    font-weight: 400;  }  #map {    height: calc(100vh - 80px);    width: 100vw;    position: absolute;    bottom: 0;  }

<html>    <head>    <script src="http://maps.google.com/maps/api/js?key=aizasybhiqpzkp8tv-pwji2wsi6-wm5w6-o0y78&libraries=places" type="text/javascript"></script>    <script src="http://dev.bigpixelcreative.com/maptest/js/routeboxer.js"></script>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  </head>    <body onload="initialize();">    <div id="floating-panel">      <b>start: </b>      <input id="from" type="text" size="50">      <b>end: </b>      <input id="to" type="text" size="50">      <b>radius: </b>      <input id="distance" type="text" size="10">      <button id="sbmtbutton" onclick="route()">search</button>      </div>    <div id="map"></div>  </body>    </html>

the first solution comes out of box make iteration between boxpolys , markers, ask if marker in location. if is, put on map.

function   containsinrectangle(boxpolys){     (var = 0; < json.length; i++) {         var obj = json[i];             (var = 0; < boxpolys.length; i++) {             // ask if position exist in rectangles            //  take note using rectangle class's methods                 if(boxpolys[a].getbounds().contains(new google.maps.latlng(obj.latitude,obj.longitude))){                     //do routine create marker                 }                   }       }

}

now solution way exponential, have take additional measures in order make function more efficiently. if using geographic database, suggest bring markers in bounds of visible zone of map example numbers of iterations decrease.

as additional note, yes can ask rectangle class contain method, rectangle class not have if ask getbounds() method return object, latlngbounds do. tested myself, take @ links below more documentation:

google maps api : determine if point inside shape

and in api doc: https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#rectangle

because getbounds method return latlngbounds object take additional link.

https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#latlngbounds