Google Map Route Direction, Custom Pin Point, Calculate Distance And Time Using JavaScript

Introduction

 

This article demonstrates the following::

• Google map using JavaScript
• GeoComplete JavaScript for search address
• Custom pin point for Google map
• Travel mode and Route between pickup and drop off address
• Calculate total distance & time to reach your destination

1. Initialize Map

• Here I have created code for map initialization and accessing your location.
• I wrote a method inside a document ready for map initialization.
• The navigator method is asked for a sharing location that returns your current latitude and longitude.
• Using lat and long we can render your current position on the map.

  $(document).ready(function()
  {
      //map initialize
      initialize();
  });
  
  function initialize()
  {
      //ask for share location
      navigator.geolocation.getCurrentPosition(doStuff, error, setOptions);
  
      function setOptions(geoLoc)
      {
          geoLoc.enableHighAccuracy = true;
          geoLoc.timeout = 30;
          geoLoc.maximumAge = 0;
      }
  
      function doStuff(geoLoc)
      {
          latlong = new google.maps.LatLng(geoLoc.coords.latitude, geoLoc.coords.longitude);
          geolatitude = geoLoc.coords.latitude;
          geolongitude = geoLoc.coords.longitude;
  
          var mapOptions = {
              center: latlong,
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var image = 'img/home_alt.png';
          map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
  
          marker = new google.maps.Marker(
          {
              position: latlong,
              map: map,
              icon: image
          });
      }
  }
• When you share location your screen looks like the following image:
   

2. Search your location

• I used geocomplete JS for the search location.
• The following code is for search location and binding your location in textbox and label.

  $(function()
  {
      $("#PickupAddress")
          .geocomplete()
          .bind("geocode:result", function(event, result)
          {
              $("#spanPick").text($("#PickupAddress").val());
              pickUpLatLong = new google.maps.LatLng(result.geometry.location.lat(), result.geometry.location.lng());
              routeDirection("PickupAddress", pickUpLatLong);
          });
  });

3. Custom pinpoint & direction between pick up and drop off & total distance & time.

• Here, I am taking an image variable for saving the custom image path and then attaching this image in the marker.

  function routeDirection(id, latLong)
  {
      geocoder = new google.maps.Geocoder();
      var mapOptions = {
          zoom: 15,
          center: latLong,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
      var start = $("#PickupAddress").val();
      var end = $("#DropOffAddress").val();
      if (start != null && (end == null || end == ''))
      {
          geocoder.geocode(
          {
              "address": start
          }, function(results, status)
          {
              var image;
              if (status == google.maps.GeocoderStatus.OK)
              {
                  image = 'img/pin_pickup_location.png';
                  map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
                  marker = new google.maps.Marker(
                  {
                      position: latLong,
                      map: map,
                      icon: image
                  });
              }
          });
      }
  }
• For getting direction from pick up address to drop off address we implement directionsService method.
   
• If we get response status OK from Google map, then we can set direction on the map using JSON.

  directionsService.route(request, function(response, status)
  {
      if (status == google.maps.DirectionsStatus.OK)
      {
          directionsDisplay.setDirections(response);
          makeMarker(leg.start_location, "pickup location");
          makeMarker(leg.end_location, "dropoff location");
      }
  });
• After getting OK status we get response JSON from Google that contains travel mode, distance, time, start location, and end location.

  var leg = response.routes[0].legs[0];
  
  //for distance
  $("#spanDist").text(leg.distance.text);
  
  //for time
  
  $("#spanTime").text(leg.duration.text);
  
  //for travel mode
  
  $("#spanTravelMode").text(response.request.travelMode);

4. Output

• Test the output and click the following link.