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.
1. $(document).ready(function()
2. {
3. //map initialize
4. initialize();
5. });
7. function initialize()
8. {
9. //ask for share location
10. navigator.geolocation.getCurrentPosition(doStuff, error, setOptions);
12. function setOptions(geoLoc)
13. {
14. geoLoc.enableHighAccuracy = true;
15. geoLoc.timeout = 30;
16. geoLoc.maximumAge = 0;
17. }
19. function doStuff(geoLoc)
20. {
21. latlong = new google.maps.LatLng(geoLoc.coords.latitude, geoLoc.coords.longitude);
22. geolatitude = geoLoc.coords.latitude;
23. geolongitude = geoLoc.coords.longitude;
25. var mapOptions = {
26. center: latlong,
27. zoom: 15,
28. mapTypeId: google.maps.MapTypeId.ROADMAP
29. };
30. var image = 'img/home_alt.png';
31. map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
33. marker = new google.maps.Marker(
34. {
35. position: latlong,
36. map: map,
37. icon: image
38. });
39. }
40. }
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.
1. $(function()
2. {
3. $("#PickupAddress")
4. .geocomplete()
5. .bind("geocode:result", function(event, result)
6. {
7. $("#spanPick").text($("#PickupAddress").val());
8. pickUpLatLong = new google.maps.LatLng(result.geometry.location.lat(), result.geometry.location.lng());
9. routeDirection("PickupAddress", pickUpLatLong);
10. });
11. });

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.
1. function routeDirection(id, latLong)
2. {
3. geocoder = new google.maps.Geocoder();
4. var mapOptions = {
5. zoom: 15,
6. center: latLong,
7. mapTypeId: google.maps.MapTypeId.ROADMAP
8. };
9. map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
10. var start = $("#PickupAddress").val();
11. var end = $("#DropOffAddress").val();
12. if (start != null && (end == null || end == ''))
13. {
14. geocoder.geocode(
15. {
16. "address": start
17. }, function(results, status)
18. {
19. var image;
20. if (status == google.maps.GeocoderStatus.OK)
21. {
22. image = 'img/pin_pickup_location.png';
23. map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
24. marker = new google.maps.Marker(
25. {
26. position: latLong,
27. map: map,
28. icon: image
29. });
30. }
31. });
32. }
33. }
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.
1. directionsService.route(request, function(response, status)
2. {
3. if (status == google.maps.DirectionsStatus.OK)
4. {
5. directionsDisplay.setDirections(response);
6. makeMarker(leg.start_location, "pickup location");
7. makeMarker(leg.end_location, "dropoff location");
8. }
9. });
After getting OK status we get response JSON from Google that contains travel mode, distance, time, start location, and end location.
1. var leg = response.routes[0].legs[0];
3. //for distance
4. $("#spanDist").text(leg.distance.text);
6. //for time
8. $("#spanTime").text(leg.duration.text);
10. //for travel mode
12. $("#spanTravelMode").text(response.request.travelMode);

4. Output

Test the output and click the following link.

7 Comments

Join the conversation! Your thoughts help the community grow.

Abhishek Mishra8y ago
Nice one..............
Santhakumar Munuswamy10y ago
Good one
Kunal Patel10y ago
Thanks to all
Sibeesh Venu10y ago
Nice Share
Rajeesh Menoth10y ago
Nice!
Humayun Kabir Mamun10y ago
Nice...
Harshad Pansuriya10y ago
Nice one