Geek Answers Handbook

Google Maps - Directions from User Locations

I have the following function, which checks if the browser supports geolocation, and then it gets the geographic location of users and centers it on the map.

What do I need to add so that I can tell users the direction to a fixed location (this will not change) from the users geolocation?

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var coords = new google.maps.LatLng(latitude, longitude); var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var mapOptions = { zoom: 15, center: coords, mapTypeControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions); var marker = new google.maps.Marker( { position: coords, map: map, }); }); } else { alert("Geolocation API is not supported in your browser.");

I added this function to my code:

  function calcRoute() { var start = position; var end = "London"; var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); }

HTML: <div id="mapContainer" onload="calcRoute()"></div>

But it still does not work.

+6
source share
2 answers

I tried to work with the following code:

 if (navigator.geolocation) { //Checks if browser supports geolocation navigator.geolocation.getCurrentPosition(function (position) { //This gets the var latitude = position.coords.latitude; //users current var longitude = position.coords.longitude; //location var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = //Sets map options { zoom: 15, //Sets zoom level (0-21) center: coords, //zoom in on users location mapTypeControl: true, //allows you to select map type eg. map or satellite navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom }, mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN }; map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"), mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('panel')); var request = { origin: coords, destination: 'BT42 1FL', travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); }); }
+12
source

Once you get the position , use the Directions service to display the direction on the map.

Here you can find the sample code https://developers.google.com/maps/documentation/javascript/directions#DisplayingResults

0
source

More articles:


All Articles