Google Maps API V3 How show the direction from a point A to point B Blue line

Question

I have latitude and longitude for 2 points on database  I want my Google Map to display a route from point A to point B     Just like we see here  Google Maps Directions     How to draw that direction line on map

User · Answer

Use the directions API     Make an ajax call i e   https   maps googleapis com maps api directions json parameters   and then parse the responce

User · Answer

Use directions service of Google Maps API v3  It s basically the same as directions API  but nicely packed in Google Maps API which also provides convenient way to easily render the route on the map    Information and examples about rendering the directions route on the map can be found in rendering directions section of Google Maps API v3 documentation

User · Answer

In your case here is a implementation using directions service   function displayRoute          var start   new google maps LatLng 28 694004  77 110291       var end   new google maps LatLng 28 72082  77 107241        var directionsDisplay   new google maps DirectionsRenderer      also  constructor can get  DirectionsRendererOptions  object     directionsDisplay setMap map      map should be already initialized       var request             origin   start          destination   end          travelMode   google maps TravelMode DRIVING            var directionsService   new google maps DirectionsService         directionsService route request  function response  status            if  status    google maps DirectionsStatus OK                directionsDisplay setDirections response

User · Answer

First Initiate your map  Tie it to some ID in the HTML eg   MyMapID    var map   new google maps Map      document getElementById  MyMapID                center            lat  Some latitude          lng  Some longitude                         Create a new directionsService object    var directionsService   new google maps DirectionsService      directionsService route         origin  origin latitude       origin longitude        destination  destination latitude       destination longitude        travelMode   DRIVING          function response  status          if  status     google maps DirectionsStatus OK            var directionsDisplay   new google maps DirectionsRenderer             suppressMarkers  true            map  map            directions  response            draggable  false            suppressPolylines  true                IF YOU SET  suppressPolylines  TO FALSE  THE LINE WILL BE              AUTOMATICALLY DRAWN FOR YOU                          IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A              polyLine  OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A             LIST         pathPoints   response routes 0  overview path map function  location              return  lat  location lat    lng  location lng                          var assumedPath   new google maps Polyline            path  pathPoints    APPLY LIST TO PATH          geodesic  true           strokeColor    708090            strokeOpacity  0 7           strokeWeight  2 5                    assumedPath setMap map      Set the path object to the map

User · Answer

I m using a popup to show the map in a new window  I m using the following url  https   www google com maps z 15 amp daddr LATITUDE LONGITUDE   HTML snippet   lt a target   blank  href  https   www google com maps z 15 amp daddr   location latitude    location longitude   gt Calculate route lt  a gt

User · Answer

Using Javascript  I created a working demo that shows how to use the Google Maps API Directions Service in Javascript through a    DirectionsService object to send and receive direction requests DirectionsRenderer object to render the returned route on the map    x000D   x000D  function initMap     x000D    var pointA   new google maps LatLng 51 7519  -1 2578   x000D      pointB   new google maps LatLng 50 8429  -0 1313   x000D      myOptions     x000D        zoom  7  x000D        center  pointA x000D         x000D      map   new google maps Map document getElementById  map-canvas    myOptions   x000D         Instantiate a directions service  x000D      directionsService   new google maps DirectionsService  x000D      directionsDisplay   new google maps DirectionsRenderer   x000D        map  map x000D          x000D      markerA   new google maps Marker   x000D        position  pointA  x000D        title   point A   x000D        label   A   x000D        map  map x000D          x000D      markerB   new google maps Marker   x000D        position  pointB  x000D        title   point B   x000D        label   B   x000D        map  map x000D          x000D   x000D       get route from A to B x000D    calculateAndDisplayRoute directionsService  directionsDisplay  pointA  pointB   x000D   x000D    x000D   x000D   x000D   x000D  function calculateAndDisplayRoute directionsService  directionsDisplay  pointA  pointB    x000D    directionsService route   x000D      origin  pointA  x000D      destination  pointB  x000D      travelMode  google maps TravelMode DRIVING x000D       function response  status    x000D      if  status    google maps DirectionsStatus OK    x000D        directionsDisplay setDirections response   x000D        else   x000D        window alert  Directions request failed due to     status   x000D        x000D        x000D    x000D   x000D  initMap    x000D      html  x000D      body   x000D        height  100   x000D        margin  0  x000D        padding  0  x000D        x000D       map-canvas   x000D        height  100   x000D        width  100   x000D        x000D   lt script src  https   maps googleapis com maps api js sensor false  gt  lt  script gt  x000D   x000D   lt div id  map-canvas  gt  lt  div gt  x000D   x000D   x000D    Also on Jsfiddle  http   jsfiddle net user2314737 u9no8te4   Using Google Maps Web Services  You can use the Web Services using an API KEY issuing a request like this      https   maps googleapis com maps api directions json origin Toronto amp destination Montreal amp key API KEY   An API KEY can be obtained in the Google Developer Console with a quota of 2 500 free requests day   A request can return JSON or XML results that can be used to draw a path on a map   Official documentation for Web Services using the Google Maps Directions API are here

[google-maps] Google Maps API V3 : How show the direction from a point A to point B (Blue line)?

Examples related to google-maps

Examples related to google-maps-api-3