Codeigniter JavaScript PHP

How to Draw Route Map on Google Maps Using Javascript

April 11, 2022 by Vijay Poshiya 1 Comment

In this article, You are going to learn how to draw a route map on google maps using javascript in PHP. You can easily draw a route between two markers in google maps using Google Map Javascript API and show the route path based on Travel Mode. Google Map Javascript API provides a Direction service to draw routes between locations.

In this direction service, you require the start and endpoint of the route to be drawn. It responds to the direction data which will be rendered on the google map.

Before starting, You have to enable Google Map Direction API. This guide explains more about how to enable API keys.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async></script>

1	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async></script>

You need to load the JavaScript API First. You need to change API Key in API URL for using the Google Maps JavaScript API.

In this example, I have added <div id=”map-canvas”></div> to load google map. also, I have specified the start and end locations when initializing the map. When you DOM load initialize() method will render the google map as per start and end location.

I have specified travel mode “DRIVING”. You can use it as per your requirement. Google provides different travel modes like Driving, Walking, Bicycle etc.

Also, You can drag that particular point to another route or another road to get the shortest route.

The following screenshot shows the starting point A to destination point B.

Image Source Google Maps – How-to-Draw-Route-Path-on-Map-using-Google-Maps-Direction-API-in-PHP

Complete Code to Draw Route Map on Google Maps Using Javascript

<!DOCTYPE html>
<html>
    <head>
        <title>How to Draw Route Map on Google Maps Using Javascript</title>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async></script>
    </head>
    <body>
        <div id="map-canvas"></div>
        <script type="text/javascript">
            var directionsService = new google.maps.DirectionsService();
            var map;
            function initialize() {
              var center = new google.maps.LatLng(0, 0);
              var myOptions = {
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: center
              }
              map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
              var start = "Sadulpur, India";
              var end = "New Delhi, India";
              plotDirections(start, end);
            }
            
            function plotDirections(start, end) {
              var TravelMode = 'DRIVING';
              var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode[TravelMode],
                provideRouteAlternatives: false
              };
            
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  var routes = response.routes;
                  var colors = ['green', 'blue'];
                  var directionsDisplays = [];
            
                  // Reset the start and end variables to the actual coordinates
                  start = response.routes[0].legs[0].start_location;
                  end = response.routes[0].legs[0].end_location;
            
                  // Loop through each route
                  for (var i = 0; i < routes.length; i++) {
                    var directionsDisplay = new google.maps.DirectionsRenderer({
                      map: map,
                      directions: response,
                      routeIndex: i,
                      draggable: true,
                      polylineOptions: {
                        strokeColor: colors[i],
                        strokeWeight: 4,
                        strokeOpacity: .3
                      }
                    });
                    // Push the current renderer to an array
                    directionsDisplays.push(directionsDisplay);
            
                    // Listen for the directions_changed event for each route
                    google.maps.event.addListener(directionsDisplay, 'directions_changed', (function(directionsDisplay, i) {
                      return function() {
                        var directions = directionsDisplay.getDirections();
                        //alert(JSON.stringify(directions));
                        //alert(directions.routes[0].legs[0].start_location.lat());
            
                        var new_start = directions.routes[0].legs[0].start_location;
                        var new_end = directions.routes[0].legs[0].end_location;
                        //alert("new_start : "+new_start+ "start :" +start);
                        if ((new_start.toString() !== start.toString()) || (new_end.toString() !== end.toString())) {
                        // Remove every route from map
                          for (var j = 0; j < directionsDisplays.length; j++) {
                                directionsDisplays[j].setMap(null);
                          }
                        // Redraw routes with new start/end coordinates
                          plotDirections(new_start, new_end);
                        }
                      }
                    })(directionsDisplay, i)); // End listener
                  } // End route loop
                }
              });
            }
            initialize();
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>How to Draw Route Map on Google Maps Using Javascript</title>

</head>

<body>

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

var map;

function initialize() {

var center = new google.maps.LatLng(0, 0);

var myOptions = {

zoom: 7,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: center

}

map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var start = "Sadulpur, India";

var end = "New Delhi, India";

plotDirections(start, end);

}

function plotDirections(start, end) {

var TravelMode = 'DRIVING';

var request = {

origin: start,

destination: end,

travelMode: google.maps.DirectionsTravelMode[TravelMode],

provideRouteAlternatives: false

};

directionsService.route(request, function(response, status) {

if (status == google.maps.DirectionsStatus.OK) {

var routes = response.routes;

var colors = ['green', 'blue'];

var directionsDisplays = [];

// Reset the start and end variables to the actual coordinates

start = response.routes[0].legs[0].start_location;

end = response.routes[0].legs[0].end_location;

// Loop through each route

for (var i = 0; i < routes.length; i++) {

var directionsDisplay = new google.maps.DirectionsRenderer({

map: map,

directions: response,

routeIndex: i,

draggable: true,

polylineOptions: {

strokeColor: colors[i],

strokeWeight: 4,

strokeOpacity: .3

}

});

// Push the current renderer to an array

directionsDisplays.push(directionsDisplay);

// Listen for the directions_changed event for each route

google.maps.event.addListener(directionsDisplay, 'directions_changed', (function(directionsDisplay, i) {

return function() {

var directions = directionsDisplay.getDirections();

//alert(JSON.stringify(directions));

//alert(directions.routes[0].legs[0].start_location.lat());

var new_start = directions.routes[0].legs[0].start_location;

var new_end = directions.routes[0].legs[0].end_location;

//alert("new_start : "+new_start+ "start :" +start);

if ((new_start.toString() !== start.toString()) || (new_end.toString() !== end.toString())) {

// Remove every route from map

for (var j = 0; j < directionsDisplays.length; j++) {

directionsDisplays[j].setMap(null);

}

// Redraw routes with new start/end coordinates

plotDirections(new_start, new_end);

}

})(directionsDisplay, i)); // End listener

} // End route loop

}

});

}

initialize();

</script>

</body>

</html>

I hope it helped you with an easy way to draw routes on google maps in php with more understanding. Please let us know in the comment section if you have any concerns.

You can also share with your friends, who need to draw a route between two markers in google maps.

Will meet you in my upcoming articles.

Thank You!

Vijay Poshiya

Thanks for your time, to know about me.

Hello I Am Vijay Poshiya. 🙂

Here’s My little description of your attention on Me and My blog. I am here to help you with PHP programming. I can give you a cake walkthrough platform where a complex program can make it easier for you. I will also provide you with the rare collections of task sets over the internet.

I hope you will find your solutions in better understanding shape within my blog.

How to Draw Route Map on Google Maps Using Javascript

Complete Code to Draw Route Map on Google Maps Using Javascript

Related Posts

1 Comment

Leave a Comment

Cancel Reply

Categories

How to Draw Route Map on Google Maps Using Javascript

Complete Code to Draw Route Map on Google Maps Using Javascript

Related Posts

How to Send Silent Push Notifications Using PHP And Firebase

Gmail SMTP Not Working Issue 2022

IMPORTANT HTACCESS FILES TUTORIAL AND TIPS

1 Comment

Leave a Comment

Cancel Reply

Categories