How to Find your CurrentLocation and show directions from Current Location to Destination GoogleMap
Posted By : Parveen Kumar Yadav | 30-Dec-2015
For showing direction first you need to integrate Google Map in your application. For Integrating Map please read my Blog i.e How to integrate google map with angularJs with search text box and getting the complete address user entered with coordinates.
In Controller:-
you need to define two new variable as follows:-
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
Then After init function add:
infoWindow = new google.maps.InfoWindow({
map: map
});
directionsDisplay.setMap(map);
Then at last call a method getLocation();
/*
Function is used for getting current location of the user.
*/
function getLocation() {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
$scope.latitude = position.coords.latitude;
$scope.longitude = position.coords.longitude;
var currentLocation = ($scope.latitude + ',' + $scope.longitude).toString();
setCurrentLocation(currentLocation);
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Your Current Location.');
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
Function is used to handle the error
*/
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
/*
Function is used to calculate and display the route on Map
*/
function calculateAndDisplayRoute(directionsService, directionsDisplay, currentLocation) {
$scope.destLoc = dataTransferService.getProperty();
if( $scope.destLoc!=undefined){
$scope.destLocation = $scope.destLoc.latitude+','+$scope.destLoc.langitude
directionsService.route({
origin: currentLocation,
destination: $scope.destLocation,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
console.log('Directions request failed due to ' + status);
}
});
}
}
}]);
In the above controller example there are three different functions we are using One is used for getting the current location of the user other one is for handling errors if any and last One is used to display the direction or route on map.
In this method we are getting the destination location from one of our service that is dataTransferService you can pass your destination.
In this way you can show direction from your current location to destination.
Note:-On local it will work fine but on Production if you are using http protocol it will not going to work will support only Https protocol because some methods are deprecated from google API so it will allow only Https protocol.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Parveen Kumar Yadav
Parveen is an experienced Java Developer working on Java, J2EE, Spring, Hibernate, Grails ,Node.js,Meteor,Blaze, Neo4j, MongoDB, Wowza Streaming Server,FFMPEG,Video transcoding,Amazon web services, AngularJs, javascript. He likes to learn new technologies