Many of the location Apps we need to draw a path from origin to destination. We need to draw path between some locations.
I'll be drawing the path by two modes. Either you are walking or you are driving. I'll be showing optimize way points for the travel path.
Here I'm using Google Map JavaScript API for drawing the route between the points on Google Map. You can draw the path among multiple points so it is not restricted to create path between two points or three points.
I have created a PHP file where I have defined the Google map API key and the way points where you can draw the route path. I have created an array of way points you also can fetch these way points from your database if needed.
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<?php
define("API_KEY", "AIzaSyDn1JrKoNqygrc0Wjei_wpPCSFIJXvvclk");
$wayPoints = ["Uttam Nagar West, New Delhi, Delhi","Meerut","Aligarh","Anupshahr","Bulandshahr"];
?>
<html>
<head>
<title>How to draw Path on Map using Google Maps Direction API</title>
<style>
#map-layer {
max-width: 900px;
min-height: 550px;
}
.lbl-locations {
font-weight: bold;
margin-bottom: 15px;
}
.locations-option {
display:inline-block;
margin-right: 15px;
}
.btn-draw {
background: green;
color: #ffffff;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
<h1>How to draw Path on Map using Google Maps Direction API</h1>
<div class="lbl-locations">Travel Mode</div>
<div>
<input type="radio" name="travel_mode" class="travel_mode" value="WALKING"> WALKING
<input type="radio" name="travel_mode" class="travel_mode" value="DRIVING" checked> DRIVING
</div>
<div> </div>
<div class="lbl-locations">Way Points</div>
<div>
<?php
foreach ($wayPoints as $wayPoint) {
?>
<div class="locations-option"><input type="checkbox" name="way_points[]" class="way_points" value="<?php echo $wayPoint; ?>"> <?php echo $wayPoint; ?></div>
<?php
}
?>
<input type="button" id="drawPath" value="Draw Path" class="btn-draw" />
</div>
<div id="map-layer"></div>
<script>
var map;
var waypoints
function initMap() {
var mapLayer = document.getElementById("map-layer");
var centerCoordinates = new google.maps.LatLng(28.6139, 77.2090);
var defaultOptions = { center: centerCoordinates, zoom: 8 }
map = new google.maps.Map(mapLayer, defaultOptions);
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
$("#drawPath").on("click",function() {
waypoints = Array();
$('.way_points:checked').each(function() {
waypoints.push({
location: $(this).val(),
stopover: true
});
});
var locationCount = waypoints.length;
if(locationCount > 0) {
var start = waypoints[0].location;
var end = waypoints[locationCount-1].location;
drawPath(directionsService, directionsDisplay,start,end);
}
});
}
function drawPath(directionsService, directionsDisplay,start,end) {
directionsService.route({
origin: start,
destination: end,
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: $("input[name='travel_mode']:checked"). val()
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Problem in showing direction due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap">
</script>
</body>
</html>
|
I have declared the center coordinates of the map like:
1
|
var centerCoordinates = new google.maps.LatLng(28.6139, 77.2090);
|
We also can increase or decrease the zoom level of the map here like:
1
|
var defaultOptions = { center: centerCoordinates, zoom: 8 }
|