In this article I will explain how to draw a route between user’s current location and the specified location on Google Maps V3.
In day to day life in our mobile phones we make use of navigation, in similar way using the HTML5 GeoLocation feature we can determine the current location of the user and using the Google Maps Geocoding API we can determine the position coordinates i.e. Latitude and Longitude of an Address.
Thus now we can easily draw route between the two locations using the Google Maps Routing API.
Draw (Plot) route between User's Current Location and specified location on Google Maps V3
User has to input the address of the location he wants to route from his current location and press the button. The following method is executed which first determines the current location coordinates i.e. Latitude and Longitude of the user using the browser’s HTML5 GeoLocation feature.
Note: The browser must support HTML5 in order to get the user’s current location. For more details, please refer
Google Maps GeoLocation API Example
.
Next, we need to determine the location coordinates i.e. Latitude and Longitude of the address which was typed in by the user using the Google Maps Geocoding API. For more details refer my article
Get Latitude and Longitude of a location from Address using JavaScript
.
Now we have the geographical location coordinates of both the user’s current location and also the location he wants to go.
Finally we need to draw route between the two geographical location points using the Google Maps Routing API. For more details refer
Google Maps V3: Draw route line between two geographic locations / Coordinates / Latitude and Longitude points
.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function GetRoute() {
var markers = new Array();
var myLatLng;
//Find the current location of the user.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var m = {};
m.title = "Mudassar's location";
m.lat = p.coords.latitude;
m.lng = p.coords.longitude;
markers.push(m);
//Find specified address location.
var address = document.getElementById("txtAddress").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
m = {};
m.title = address;
m.lat = results[0].geometry.location.lat();
m.lng = results[0].geometry.location.lng();
markers.push(m);
var mapOptions = {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array.
var path = new google.maps.MVCArray();
//Initialize the Direction Service.
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color.
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP.
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
} else {
//If the location specified is invalid, show error.
alert("Invalid location for plotting route.");
window.location.href = window.location.href;
}
});
}
}
} else {
alert("Request failed.")
}
});
});
}
else {
alert('Geo Location feature is not supported in this browser.');
return;
}
}
</script>
<input type="text" id="txtAddress" value="" style = "width:200px" />
<br />
<input type="button" value="Get Route" onclick="GetRoute()" />
<hr />
<div id="dvMap" style="width: 500px; height: 500px">
下载：GoogleMaps_DrawPath_CurrentLocation
转自：Google Maps V3: 导航到指定地址 Draw (Plot) route between User's current location and Specified location