in this post, we’ll be going to implement how to draw the path on the map between two locations using Google Map Javascript API. You can use routes on Google Maps for a location-based service, a delivery tracking system, or simply helping users navigate.
We’ll use the JavaScript library Direction service to draw routes between locations.
Google Maps provides a set of APIs that allow developers to embed maps into web pages, create custom markers, and, importantly, generate routes between locations.
Let’s explore how to create routes on Google Maps using PHP.
First, You need to obtain a Google Maps API key. You need to visit the Google Cloud Console and create a new project, then enable the “Maps JavaScript API,” and generate your API key.
Let’s create a Google HTML page to view a map with routes. We’ll include the Google Maps JavaScript API and set up a map container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Maps Routes with PHP</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Your map initialization code here
}
</script>
</body>
</html> You need to replace YOUR_API_KEY with the API key you obtained from the Google Cloud Console.
Let’s initialize a basic map for a Denver location. We have passed lat and lng for Denver city.
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 39.7348, lng: -104.9653 }, // Denver coordinates
zoom: 12
});
} You can replace the coordinates and zoom level according to your preferences.
Let’s enhance the map by adding markers, Added to markers into the map. We’ll modify the initMap function to include markers:
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 39.7348, lng: -104.9653 },
zoom: 12
});
// Add markers
const marker1 = new google.maps.Marker({
position: { lat: 39.7348, lng: -104.9653 },
map: map,
title: 'Marker 1'
});
const marker2 = new google.maps.Marker({
position: { lat: 39.546800, lng: -105.095823 },
map: map,
title: 'Marker 2'
});
} Replace positions and titles as per your requirements.
Let’s create a simple PHP script that calculates and returns a route between two locations. We’ll leverage the Directions API provided by Google Maps to generate dynamic routes using PHP.
<?php
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$origin = urlencode($_GET['origin']);
$destination = urlencode($_GET['destination']);
$api_key = 'YOUR_API_KEY'; // Replace with your Google Maps API key
$url = "https://maps.googleapis.com/maps/api/directions/json?origin=$origin&destination=$destination&key=$api_key";
$response = file_get_contents($url);
header('Content-Type: application/json');
echo $response;
}
?> Finally, modify the JavaScript code in your HTML file to fetch and display the route on the map.
function initMap() {
// Inside initMap function
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 39.7348, lng: -104.9653 },
zoom: 12
});
// Add markers
const marker1 = new google.maps.Marker({
position: { lat: 39.7348, lng: -104.9653 },
map: map,
title: 'Marker 1'
});
const marker2 = new google.maps.Marker({
position: { lat: 39.546800, lng: -105.095823 },
map: map,
title: 'Marker 2'
});
directionsRenderer.setMap(map);
const request = {
origin: 'Denver, Colorado, USA',
destination: 'Denver Botanic Gardens, 1007 York St, Denver, CO 80206, United States',
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status === 'OK') {
directionsRenderer.setDirections(response);
}
});
} Replace the origin and destination values based on your needs.
We have learned javascript Google Map API and integrated it with PHP. We have created a map and added markers. We have defined routes between the locations using Google Maps. You can change travelMode, source and destination as per your need.
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More