Question

I reading stuff about the Google API and I wanted to implement the usual Google driving directions that Google maps has for 2 different points. Here’s my code so far

(function() {
  window.onload = function() {

// Creating a map
var options = {
  zoom: 5,
  center: new google.maps.LatLng(36.1834, -117.4960),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);

// Creating an array that will contain the points for the polyline
var route = [
  new google.maps.LatLng(37.7671, -122.4206),
  new google.maps.LatLng(34.0485, -118.2568)
];

// Creating the polyline object
var polyline = new google.maps.Polyline({
  path: route,
  strokeColor: "#ff0000",
  strokeOpacity: 0.6,
  strokeWeight: 5
});

// Adding the polyline to the map
polyline.setMap(map);

  };
 })();

It has a straight line between the two cities…

Answer 1

Here’s an example of using the DirectionsService:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var homeLatlng;

function initialize() {
    homeLatlng = new google.maps.LatLng(37.7671, -122.4206);

    var myOptions = {
        zoom: 10,
        center: homeLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var infowindow = new google.maps.InfoWindow({
        content: ''
    });

    directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: false,
        map: map, 
        markerOptions: {
            draggable: false
        },
        panel: document.getElementById("directionsPanel"),
        infoWindow: infowindow
    });

    var request = {
        origin:homeLatlng,
        destination:new google.maps.LatLng(34.0485, -118.2568),
        travelMode: google.maps.DirectionsTravelMode[DRIVING],
        unitSystem: google.maps.UnitSystem[METRIC]
    };

    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
}