title: Find a place lies between source and destination google maps and places API
body: <p>I have written an application where user can enter source and destination using Google places API auto complete and he also can enter an intermediate place . I just wanna determine whether that intermediate place come along the way of source and destination .</p>
  
  <p>This code was working till last week . Not sure what is the issue .</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
                 body {
  
                         font-family: sans-serif;
                         font-size: 14px;
                 }
  &lt;/style&gt;
         &lt;title&gt;Pillion Search Engine&lt;/title&gt;
         &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;/script&gt;
  
          &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;libraries=places,geometry" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              var locations = new Array();
              var directionsDisplay;
              var directionsService = new google.maps.DirectionsService();
  
              //calculates distance between two points in km's
              function calcDistance(p1, p2){
                  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
               }
  
              function initialize() {
  
                  alert("Inside Initialize");
                  var UserSource = document.getElementById('searchTextFieldSource');
                  var UserDestination = document.getElementById('searchTextFieldDestination');
                  var DbSource = document.getElementById('searchTextFieldIntermediateSource');
                  var DbDestination = document.getElementById('searchTextFieldIntermediateDestination');
  
  
  
                  var ACUserSource = new google.maps.places.Autocomplete(UserSource);
                  var ACUserDestination = new google.maps.places.Autocomplete(UserDestination);
                  var ACDbSource = new google.maps.places.Autocomplete(DbSource);
                  var ACDbDestination = new google.maps.places.Autocomplete(DbDestination);
  
                  google.maps.event.addListener(ACDbDestination, 'place_changed', function () {
                      var place1 = ACUserSource.getPlace();
  
                      document.getElementById('city1').value = place1.name;
  
                      var place1Lat = place1.geometry.location.lat();
                      var place1Lng = place1.geometry.location.lng();
  
                      document.getElementById('cityLat1').value = place1Lat;
                      document.getElementById('cityLng1').value = place1Lng;
  
                      var obj = new Object();
                      obj.city = place1.name;
                      obj.latitude = place1.geometry.location.lat();
                      obj.longitude = place1.geometry.location.lng();
                      locations.push(obj);
  
  
                      var place2 = ACUserDestination.getPlace();
                      document.getElementById('city2').value = place2.name;
                      var place2Lat = place2.geometry.location.lat();
                      var place2Lng = place2.geometry.location.lng();
                      document.getElementById('cityLat2').value = place2Lat;
                      document.getElementById('cityLng2').value = place2Lng;
  
                      var obj = new Object();
                      obj.city = place2.name;
                      obj.latitude = place2.geometry.location.lat();
                      obj.longitude = place2.geometry.location.lng();
                      locations.push(obj);
  
                      //For intermediate point Source
                      var place3 = ACDbSource.getPlace();
                      document.getElementById('city3').value = place3.name;
                      var place3Lat = place3.geometry.location.lat();
                      var place3Lng = place3.geometry.location.lng();
                      document.getElementById('cityLat3').value = place3Lat;
                      document.getElementById('cityLng3').value = place3Lng;
  
                       //For intermediate point Destination
                      var place4 = ACDbDestination.getPlace();
                      document.getElementById('city4').value = place4.name;
                      var place4Lat = place4.geometry.location.lat();
                      var place4Lng = place4.geometry.location.lng();
                      document.getElementById('cityLat4').value = place4Lat;
                      document.getElementById('cityLng4').value = place4Lng;
  
                      var p1 = new google.maps.LatLng(place1Lat, place1Lng);
                      var p2 = new google.maps.LatLng(place2Lat, place2Lng);
  
  
  
                      //alert(calcDistance(p1, p2));
  
                      directionsDisplay = new google.maps.DirectionsRenderer();
  
                      var startPlace = new google.maps.LatLng(place1Lat, place1Lng);
  
                      var mapOptions = {
                          zoom: 7,
                          center: startPlace
                      }
  
                      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
                      directionsDisplay.setMap(map);
  
                      var start = $("#city1").val();
                      var end = $("#city2").val();
  
                      var request = {
                          origin: start,
                          destination: end,
                          travelMode: google.maps.TravelMode.DRIVING
                      };
  
                      var positionsource = new google.maps.LatLng(place3Lat, place3Lng);
                      var positiondestination = new google.maps.LatLng(place4Lat, place4Lng);
  
                      /*if(calcDistance(positiondestination, p1)&gt; calcDistance(positiondestination, p2)) {
                          alert("Straight path");
                      }
                      else {
                          alert("Reverse path");
                      }*/
  
                      /*var heading1 = google.maps.geometry.spherical.computeHeading(p1, p2);
                      alert("heading1: " + heading1);
  
                      alert("heading2: " + heading2);*/
  
                      directionsService.route(request, function (result, status) {
                          if (status == google.maps.DirectionsStatus.OK) {
                              directionsDisplay.setDirections(result);
  
                              if ((google.maps.geometry.poly.isLocationOnEdge(positionsource,
                                  new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath(result.routes[0].overview_polyline.points) }),
                                  0.0100000000))&amp;(google.maps.geometry.poly.isLocationOnEdge(positiondestination,
                                  new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath(result.routes[0].overview_polyline.points) }),
                                  0.0100000000))) 
  
                              {
  
                                  alert("Belongs to the path");
                                  var heading2 = google.maps.geometry.spherical.computeHeading(positionsource, positiondestination);
                                  if(heading2&lt;0) {
                                      alert("Reverse direction");
                                  }
                              }
                              else {
                                  alert("Doesnt Belong to the path");
                              }
  
                            }
                      });
                  });
              }
              google.maps.event.addDomListener(window, 'load', initialize);
  
              function refreshMap(locations) {
                  google.maps.visualRefresh = true;
                  var map = new google.maps.Map(document.getElementById('map'), {
                      zoom: 10,
                      center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  });
  
                  var infowindow = new google.maps.InfoWindow();
                  var marker, i;
  
                  for (i = 0; i &lt; locations.length; i++) {
                      marker = new google.maps.Marker({
                          position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
                          map: map
                      });
  
                      google.maps.event.addListener(marker, 'click', (function (marker, i) {
                          return function () {
                              infowindow.setContent(locations[i].city);
                              infowindow.open(map, marker);
                          }
                      })(marker, i));
                  }
  
  
              }
          &lt;/script&gt;
          &lt;body&gt;
             &lt;div&gt;
                     &lt;b&gt;Source A:&lt;/b&gt;&lt;input id="searchTextFieldSource" type="text" size="50" placeholder="Enter the source" autocomplete="on" runat="server" /&gt;  
                      &lt;input type="text" id="city1" name="city1" /&gt;
                      &lt;input type="text" id="cityLat1" name="cityLat1" /&gt;
                      &lt;input type="text" id="cityLng1" name="cityLng1" /&gt;  
             &lt;/div&gt;
  
              &lt;div&gt;
                     &lt;b&gt;Destination B:&lt;/b&gt;&lt;input id="searchTextFieldDestination" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" /&gt;  
                      &lt;input type="text" id="city2" name="city2" /&gt;
                      &lt;input type="text" id="cityLat2" name="cityLat2" /&gt;
                      &lt;input type="text" id="cityLng2" name="cityLng2" /&gt;  
             &lt;/div&gt;
  
              &lt;div&gt;
                     &lt;b&gt;Intermediate Source C:&lt;/b&gt;&lt;input id="searchTextFieldIntermediateSource" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" /&gt;  
                      &lt;input type="text" id="city3" name="city3" /&gt;
                      &lt;input type="text" id="cityLat3" name="cityLat3" /&gt;
                      &lt;input type="text" id="cityLng3" name="cityLng3" /&gt;  
             &lt;/div&gt;
  
             &lt;div&gt;
                     &lt;b&gt;Intermediate Destination D:&lt;/b&gt;&lt;input id="searchTextFieldIntermediateDestination" type="text" size="50" placeholder="Enter the destination" autocomplete="on" runat="server" /&gt;  
                      &lt;input type="text" id="city4" name="city4" /&gt;
                      &lt;input type="text" id="cityLat4" name="cityLat4" /&gt;
                      &lt;input type="text" id="cityLng4" name="cityLng4" /&gt;  
             &lt;/div&gt;
  &lt;input id="clickMe" type="button" value="clickme" onclick="initialize();" /&gt;
              &lt;div id="map" style="width: 700px; height: 600px;"&gt;&lt;/div&gt;
  
  
         &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>