polyline snap to road using google maps api v3

by

You were on the right track with the directions service. Here’s sample code:

var map, path = new google.maps.MVCArray(),
    service = new google.maps.DirectionsService(), poly;

function Init() {
  var myOptions = {
    zoom: 17,
    center: new google.maps.LatLng(37.2008385157313, -93.2812106609344),
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID,
          google.maps.MapTypeId.SATELLITE]
    },
    disableDoubleClickZoom: true,
    scrollwheel: false,
    draggableCursor: "crosshair"
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  poly = new google.maps.Polyline({ map: map });
  google.maps.event.addListener(map, "click", function(evt) {
    if (path.getLength() === 0) {
      path.push(evt.latLng);
      poly.setPath(path);
    } else {
      service.route({
        origin: path.getAt(path.getLength() - 1),
        destination: evt.latLng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var i = 0, len = result.routes[0].overview_path.length;
              i < len; i++) {
            path.push(result.routes[0].overview_path[i]);
          }
        }
      });
    }
  });
}

Also, see my working example: http://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

More Related Contents:

  1. Google Maps JS API v3 – Simple Multiple Marker Example
  2. How to Display Multiple Google Maps per page with API V3
  3. Google Map API v3 — set bounds and center
  4. Google Map API – multiple icons in wrong spot
  5. What’s the API Key for in Google Maps API V3?
  6. Google Maps API autocomplete 2nd address fields on same page
  7. google maps move marker with lat/lng from ajax success returned data
  8. Google Maps API V3 : How show the direction from a point A to point B (Blue line)?
  9. Do I need to hide API key when using google maps js API? If so, how?
  10. How to set zoom level in google map
  11. Have just one InfoWindow open in Google Maps API v3
  12. Google Maps – How to get the distance between two point in metre?
  13. Load google maps v3 dynamically with ajax
  14. How to get the formatted address from a dragged marker in Google Version Maps
  15. How to draw a polygon around a polyline in JavaScript?
  16. Request main road / curbside StreetView panoramas instead of back alleys from API
  17. Open infoWindows from an external link outside of the google map
  18. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  19. Animating Multiple Markers
  20. Google Maps API v3: How do I dynamically change the marker icon?
  21. Google map custom marker with css rounded corner
  22. How to trigger the onclick event of a marker on a Google Maps V3?
  23. Google Maps: Auto close open InfoWindows?
  24. Determine if point is within bounding box
  25. Add CSS styled marker to google maps
  26. Adding simple marker clusterer to google map
  27. Google map multiple overlay no cumulative opacity
  28. Google Directions Api returning 0 routes
  29. Change map opacity outside circle of Google Maps JavaScript API v3
  30. Google maps API V3 method fitBounds()

Leave a Comment