Google Maps JS Api - b.get is not a function error(isLocationOnEdge)

Question

I want to check if there is a marker on my route.. So i tried to use isLocationOnEdge() and i am getting "TypeError:b.get is not a function" error. Here is my code i tried several changes but couldn't fix the problem.

      var directionsDisplay = new google.maps.DirectionsRenderer;
      var directionsService = new google.maps.DirectionsService;

      directionsDisplay.setMap(map);

      calculateAndDisplayRoute(directionsService, directionsDisplay);

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
      directionsService.route({
      origin: my_position.getPosition(),
      destination: new google.maps.LatLng(my_markers[0][0],my_markers[0][1]),
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
      var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
      var path = response.routes[0].overview_path;
      for (var i = 0; i < my_markers.length; i++) {
      if (isLocationOnEdge(new google.maps.LatLng(my_markers[i][0],my_markers[i][1]),path))
          {
              console.log("Its in!")
          }
        }


    });

Answer 1

According to the documentation, the isLocationOnEdge method takes the following arguments:

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)
Return Value: boolean
Computes whether the given point lies on or near to a polyline, or the edge of a polygon, within a specified tolerance. Returns true when the difference between the latitude and longitude of the supplied point, and the closest point on the edge, is less than the tolerance. The tolerance defaults to 10-9 degrees.

The overview_path is not a google.maps.Polyline (or a Polygon), it is an array of google.maps.LatLng objects.

If I use that path to create a polyline, it works for me

var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
var path = response.routes[0].overview_path;
var polyline = new google.maps.Polyline({
  path: path
})
if (isLocationOnEdge(new google.maps.LatLng(37.438442, -122.157558), polyline, 1e-3)) {
  console.log("Its in!")
}

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: 'poi',
        stylers: [{
          visibility: 'off'
        }]
      }]
    });

  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;

  directionsDisplay.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsDisplay);

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin: "Palo Alto, CA",
      destination: "Stanford, CA",
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
      var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
      var path = response.routes[0].overview_path;
      var polyline = new google.maps.Polyline({
        path: path
      })
      if (isLocationOnEdge(new google.maps.LatLng(37.438442, -122.157558), polyline, 1e-3)) {
        console.log("Its in!")
        var mark = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(37.438442, -122.157558),
          icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(3.5, 3.5)
          },
          title: "On Route"
        });
        var infowindow = new google.maps.InfoWindow({
          content: "on route"
        });
        infowindow.open(map, mark);
      }
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>