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 f

Solution 1:

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

example fiddle using RouteBoxer

functioncalcRoute() {
  // Clear any previous route boxes from the mapclearBoxes();

  // 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 routevar path = response.routes[0].overview_path;
            var boxes = routeBoxer.box(path, distance);
            drawBoxes(boxes);
        } elsealert("Directions request failed: " + status);
    });
}

// Draw the array of boxes as polylines on the mapfunctiondrawBoxes(boxes) {
  boxpolys = newArray(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);
      }
  }
}

Solution 2:

Example using JSTS (from this question: How to draw a polygon around a polyline in JavaScript?. Uses google.maps.geometry.poly.containsLocation

code:

function calcRoute() {
    varstart= document.getElementById('start').value;
    varend= document.getElementById('end').value;
    varrequest= {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            varoverviewPath= response.routes[0].overview_path,
                overviewPathGeo = [];
            for (vari=0; i < overviewPath.length; i++) {
                overviewPathGeo.push(
                [overviewPath[i].lng(), overviewPath[i].lat()]);
            }

            vardistance=10 / 111.12, // Roughly 10km
                geoInput = {
                    type: "LineString",
                    coordinates: overviewPathGeo
                };
            vargeoInput= googleMaps2JTS(overviewPath);
            vargeometryFactory=newjsts.geom.GeometryFactory();
            varshell= geometryFactory.createLineString(geoInput);
            varpolygon= shell.buffer(distance);

            varoLanLng= [];
            var oCoordinates;
            oCoordinates = polygon.shell.points[0];
            for (i = 0; i < oCoordinates.length; i++) {
                var oItem;
                oItem = oCoordinates[i];
                oLanLng.push(newgoogle.maps.LatLng(oItem[1], oItem[0]));
            }
            if (routePolygon && routePolygon.setMap) routePolygon.setMap(null);
            routePolygon = newgoogle.maps.Polygon({
                paths: jsts2googleMaps(polygon),
                map: map
            });
            for (var j=0; j< gmarkers.length; j++) {
              if (google.maps.geometry.poly.containsLocation(gmarkers[j].getPosition(),routePolygon)) {
                gmarkers[j].setMap(map);
              } else {
                gmarkers[j].setMap(null);
              }
           }
        }
    });
}