Site icon Learn Web Development & Programming, Artificial Intelligence, WordPress, Shopify Articles

How to Draw Route Path on Map using Google Maps Direction API in PHP

Draw Route Path on Map using Google Maps Direction API

In this article, you will learn about How to Draw Route Path between two locations on Map using Google Maps Direction API in PHP. You can easily display maps on the website using Google Maps API and point the location using marker on map and show the route path based on Travel Mode in PHP.

You can implement Google map functionality in various way on the web page as per your requirement. If you need to extend Google Map functionality and the animated marker feature than you can do it easily in a user friendly way. Now,you can learn how to move google map location marker smoothly on google map using Google Maps JavaScript API.

Drawing Route Between two Locations

Google Map API provides Direction service to draw route between locations. This direction service requires the start and the endpoint of the route to be drawn. It responds the direction resource which will be rendered on the map layer. But before start you have to enable your “Google Map Direction API“.

How to enable Directions API

If you don’t know, How you will enable google map directions API then please refer the below screenshot.

In this example, I have a group of text input box showing start or origin location and destination location. On submitting draw path button, I am sending this locations to the Google Maps Direction service with the start, endpoint of the route. It responds the direction resource with the status. The response status will be checked and the directions will be set on the map based on the status.

HTML code to enter locations and select travel mode

Code for initMap and Direction Service Request

In the above code you can see this code:

This is used to generate google map, so load the JavaScript API First. You need to change API Key in API URL for using the Google Maps JavaScript API.

If you don’t know, How you will get Google Maps JavaScript API Key. Please follow our step by step instruction to get your own API key:- How to create Google Maps JavaScript API Key.

initMap() function creates a google Map with location Marker.

Complete Code to Draw Route Path between two locations on Map using Google Maps Direction API

Output:

Please refer below screenshot to shows the path among the selected locations as populated with the text input box.

Conclusion:

Well, I hope you found this tutorial helpful for your project. Keep learning!.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request

Exit mobile version