Introduction
The chapter below demonstrates about some of Google Maps services and following are the concepts covered.
- Direction services.
- Dragging Directions.
- Maximum Zooming Imagery
Description
Google maps API provide direction services by which the user can get the direction for different locations or places.
The object
DirectionsService, calculate the directions in Google Maps API and user can use the object DirectionRenderer for rendering the result or can handle the direction by self.
A multi-path directions can be returned using series of waypoints in Google Maps Services for directions. A polyline is used to display the directions on a map and in addition to it textual description can be added with <div> element. [Ex: ‘Turn left from Cambridge University’].
The Google Maps API provide access for direction services by calling the external server. So a call back method is used to execute the user request which process the result(s).
Following are the parameters for DirectionRequest object used in direction services.- origin
- destination
- travelMode
- transitOptions
- drivingOptions
- unitSystem
- waypoints[]
- optimizeWaypoints
- provideRouteAlternatives
- avoidHighways
- avoidTolls
- region
Description
The Travel mode allow the user to select the mode of transport and calculate the directions for different transportation. Following are the travel modes supported by the Google Maps API.
google.maps.TravelMode.TRANSITTransit mode display the public transit route on user request.
google.maps.TravelMode.DRIVINGThe standard directions for driving are displayed using the road network.
google.maps.TravelMode.BICYCLINGThe directions for bicycle paths are displayed using Bicycling mode on user request.
Google.maps.TravelMode.WALKINGThe pedestrian paths are displayed using Walking mode on user request.
Example 1
The example below demonstrate the simple code for calculating the directions between two places or locations. A polyline is used to display the distance between two locations and markers are placed at the origin and destination. A dropdown box is created to select the starting and ending points.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="Hitech city, hyd">Hitech city</option>
<option value="Shamshabad, hyd">Shamshabad</option>
<option value="Secunderabad, hyd">Secunderabad</option>
<option value="Charminar, hyd">Charminar</option>
<option value="Nampally, hyd">Nampally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Khairatabad, hyd">Khairatabad</option>
<option value="Begum Bazar, hyd">Begum Bazar</option>
<option value="Sultan Bazar, hyd">Sultan Bazar</option>
<option value="Afzal Gunj, hyd">Afzal Gunj</option>
<option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
<option value="Hyderguda, hyd">Hyderguda</option>
<option value="Somajiguda, hyd">Somajiguda</option>
<option value="Malakpet, hyd">Malakpet</option>
<option value="Saidabad, hyd">Saidabad</option>
<option value="Saroornagar, hyd">Saroornagar</option>
<option value="Debirpura, hyd">Debirpura</option>
<option value="Dilshuknagar, hyd">Dilshuknagar</option>
<option value="Kothapet, hyd">Kothapet</option>
<option value="Uppal, hyd">Uppal</option>
<option value="Tank Bund, hyd">Tank Bund</option>
<option value="Koti, hyd">Koti</option>
<option value="Lb Nagar, hyd">Lb Nagar</option>
<option value="Santhosh nagar, hyd">Santhosh nagar</option>
<option value="Gachibowli, hyd">Gachibowli</option>
<option value="Kukatpally, hyd">Kukatpally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Ameerpet, hyd">Ameerpet</option>
<option value="Golkonda, hyd">Golkonda</option>
<option value="Jubilee hills, hyd">Jubilee hills</option>
<option value="Banjara hills, hyd">Banjara hills</option>
<option value="Madhapur, hyd">Madhapur</option>
<option value="Punjaguta, hyd">Punjaguta</option>
</select>
<b>End: </b>
<select id="end">
<option value="Hitech city, hyd">Hitech city</option>
<option value="Shamshabad, hyd">Shamshabad</option>
<option value="Secunderabad, hyd">Secunderabad</option>
<option value="Charminar, hyd">Charminar</option>
<option value="Nampally, hyd">Nampally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Khairatabad, hyd">Khairatabad</option>
<option value="Begum Bazar, hyd">Begum Bazar</option>
<option value="Sultan Bazar, hyd">Sultan Bazar</option>
<option value="Afzal Gunj, hyd">Afzal Gunj</option>
<option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
<option value="Hyderguda, hyd">Hyderguda</option>
<option value="Somajiguda, hyd">Somajiguda</option>
<option value="Malakpet, hyd">Malakpet</option>
<option value="Saidabad, hyd">Saidabad</option>
<option value="Saroornagar, hyd">Saroornagar</option>
<option value="Debirpura, hyd">Debirpura</option>
<option value="Dilshuknagar, hyd">Dilshuknagar</option>
<option value="Kothapet, hyd">Kothapet</option>
<option value="Uppal, hyd">Uppal</option>
<option value="Tank Bund, hyd">Tank Bund</option>
<option value="Koti, hyd">Koti</option>
<option value="Lb Nagar, hyd">Lb Nagar</option>
<option value="Santhosh nagar, hyd">Santhosh nagar</option>
<option value="Gachibowli, hyd">Gachibowli</option>
<option value="Kukatpally, hyd">Kukatpally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Ameerpet, hyd">Ameerpet</option>
<option value="Golkonda, hyd">Golkonda</option>
<option value="Jubilee hills, hyd">Jubilee hills</option>
<option value="Banjara hills, hyd">Banjara hills</option>
<option value="Madhapur, hyd">Madhapur</option>
<option value="Punjaguta, hyd">Punjaguta</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 17.2400, lng: 78.4800}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
[/c]
Example 2
The example below demonstrate the simple code for showing directions using different travel modes between two selected places or locations.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Travel modes in directions</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 17.2400, lng: 78.4800}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
document.getElementById('mode').addEventListener('change', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var selectedMode = document.getElementById('mode').value;
directionsService.route({
origin: {lat: 17.3465, lng: 78.551},
destination: {lat: 17.4454, lng: 78.3874},
travelMode: google.maps.TravelMode[selectedMode]
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
[/c]
Description
Google Maps Services also provide textual display for directions in addition to polylines and markers by calling
setPanel() on DirectionRenderer.
The direction information can be displayed using the div and the text directions are provided with language settings by which user can specify preferred language, using Language parameter while loading the API JavaScript. Example
The example below demonstrate the simple code for creating textual directions for the selected locations on a map using
div panel.
[c]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map {
margin-right: 400px;
}
#floating-panel {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
@media print {
#map {
height: 500px;
margin: 0;
}
#right-panel {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="floating-panel">
<strong>Start:</strong>
<select id="start">
<option value="Hitech city, hyd">Hitech city</option>
<option value="Shamshabad, hyd">Shamshabad</option>
<option value="Secunderabad, hyd">Secunderabad</option>
<option value="Charminar, hyd">Charminar</option>
<option value="Nampally, hyd">Nampally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Khairatabad, hyd">Khairatabad</option>
<option value="Begum Bazar, hyd">Begum Bazar</option>
<option value="Sultan Bazar, hyd">Sultan Bazar</option>
<option value="Afzal Gunj, hyd">Afzal Gunj</option>
<option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
<option value="Hyderguda, hyd">Hyderguda</option>
<option value="Somajiguda, hyd">Somajiguda</option>
<option value="Malakpet, hyd">Malakpet</option>
<option value="Saidabad, hyd">Saidabad</option>
<option value="Saroornagar, hyd">Saroornagar</option>
<option value="Debirpura, hyd">Debirpura</option>
<option value="Dilshuknagar, hyd">Dilshuknagar</option>
<option value="Kothapet, hyd">Kothapet</option>
<option value="Uppal, hyd">Uppal</option>
<option value="Tank Bund, hyd">Tank Bund</option>
<option value="Koti, hyd">Koti</option>
<option value="Lb Nagar, hyd">Lb Nagar</option>
<option value="Santhosh nagar, hyd">Santhosh nagar</option>
<option value="Gachibowli, hyd">Gachibowli</option>
<option value="Kukatpally, hyd">Kukatpally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Ameerpet, hyd">Ameerpet</option>
<option value="Golkonda, hyd">Golkonda</option>
<option value="Jubilee hills, hyd">Jubilee hills</option>
<option value="Banjara hills, hyd">Banjara hills</option>
<option value="Madhapur, hyd">Madhapur</option>
<option value="Punjaguta, hyd">Punjaguta</option>
</select>
<br>
<strong>End:</strong>
<select id="end">
<option value="Hitech city, hyd">Hitech city</option>
<option value="Shamshabad, hyd">Shamshabad</option>
<option value="Secunderabad, hyd">Secunderabad</option>
<option value="Charminar, hyd">Charminar</option>
<option value="Nampally, hyd">Nampally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Khairatabad, hyd">Khairatabad</option>
<option value="Begum Bazar, hyd">Begum Bazar</option>
<option value="Sultan Bazar, hyd">Sultan Bazar</option>
<option value="Afzal Gunj, hyd">Afzal Gunj</option>
<option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
<option value="Hyderguda, hyd">Hyderguda</option>
<option value="Somajiguda, hyd">Somajiguda</option>
<option value="Malakpet, hyd">Malakpet</option>
<option value="Saidabad, hyd">Saidabad</option>
<option value="Saroornagar, hyd">Saroornagar</option>
<option value="Debirpura, hyd">Debirpura</option>
<option value="Dilshuknagar, hyd">Dilshuknagar</option>
<option value="Kothapet, hyd">Kothapet</option>
<option value="Uppal, hyd">Uppal</option>
<option value="Tank Bund, hyd">Tank Bund</option>
<option value="Koti, hyd">Koti</option>
<option value="Lb Nagar, hyd">Lb Nagar</option>
<option value="Santhosh nagar, hyd">Santhosh nagar</option>
<option value="Gachibowli, hyd">Gachibowli</option>
<option value="Kukatpally, hyd">Kukatpally</option>
<option value="Begumpet, hyd">Begumpet</option>
<option value="Ameerpet, hyd">Ameerpet</option>
<option value="Golkonda, hyd">Golkonda</option>
<option value="Jubilee hills, hyd">Jubilee hills</option>
<option value="Banjara hills, hyd">Banjara hills</option>
<option value="Madhapur, hyd">Madhapur</option>
<option value="Punjaguta, hyd">Punjaguta</option>
</select>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script>
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 17.2400, lng: 78.4800}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>[/c] Description
Google Maps API provide Direction Dragging which allows the user to select the alternate route by clicking and dragging on a map.
By setting the
draggable property to true the direction can be dragged on a map and only the transit directions cannot be dragged.
Example
The example below demonstrate the simple code for dragging the direction between the two selected locations or places.
[c]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Draggable directions</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 63%;
height: 100%;
}
#right-panel {
float: right;
width: 34%;
height: 100%;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
.panel {
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<p>Total Distance: <span id="total"></span></p>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 17.2400, lng: 78.4800}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
displayRoute('Lb nagar, hyd', 'Shamshabad, hyd', directionsService,
directionsDisplay);
}
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [{location: 'Lb nagar ringroad, hyd'}, {location: 'Shamshabad airport, hyd'}],
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
[/c]
Description
Various zooming levels are provide by Google Maps Services for viewing a map. The levels 0-18 gives the available roadmap imagery. For a remote locations at high zooming levels the satellite imagery may not available always, by using the
MaxZoomService object user can know the maximum zooming level for a preferred location.
For more information about Zooming checkout Google Maps - Zoom. Key Points
- The options for different travel modes changes i.e. when requesting the transit directions it avoids the options like waypoints, highways etc.
- The waypoints are used to return the multi-path directions in Google Maps Services.
Programming
Tips
- Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
- Set the required Map Properties for better output.
- Make sure the latitude and longitudes of the required location mentioned to be correct.