onlinepch onlinepch - 1 month ago 18
Javascript Question

Google api v3 show nearby markers on customer road

How can I show only the markers (they are predefined, but hidden for the whole map), which are nearby (may by radius of 10mile or 20mile) to the road I choose using Google api v3 for example I use Directions service

HTML:

<div id="panel">
<b>start: </b>
<input type="text" id="start" name="start" maxlength="30" onchange="calcRoute();" />
<b>end: </b>
<input type="text" id="end" name="end" maxlength="30" onchange="calcRoute();" />
</div>
<div id="map"></div>


JavaScript:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.891224, -87.638675);
var mapOptions = {
zoom:7,
center: chicago
}

map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);

/* === markers === */
var locations = [
['1', 40.577651, -82.200443],
['2', 40.760976, -93.911868],
['3', 39.110017, -111.116458],
['4', 27.036116, -81.717045],
['5', 34.104058, -117.444583],
['6', 44.790790, -121.443607],
];

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
map: map,
title: locations[i][0],
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
//visible: false, //true for all, but hidden
icon:'img/the_icon.png'
});
}

}


function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer

You have 2 markers within 20 miles of a route from NY to LA:

example fiddle using RouteBoxer

function calcRoute() {
  // Clear any previous route boxes from the map
  clearBoxes();

  // Convert the distance to box around the route from miles to km
  distance = 20 * 1.609344;

    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            // Box around the overview path of the first route
            var path = response.routes[0].overview_path;
            var boxes = routeBoxer.box(path, distance);
            drawBoxes(boxes);
        } else alert("Directions request failed: " + status);
    });
}

// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
    });
      for (var j=0; j< gmarkers.length; j++) {
          if (boxes[i].contains(gmarkers[j].getPosition()))
              gmarkers[j].setMap(map);
      }
  }
}