Google Maps - directions from users geo-location
19,780
Got it working 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);
}
});
});
}
Author by
Colin747
Currently writing my thesis on using wearable technology with machine vision to support occupants with Activities of Daily Living while working as a Research Associate within the Smart Environments Research Group and Ulster University.
Updated on June 06, 2022Comments
-
Colin747 almost 2 years
I have the following function that checks if the browser supports geo-location and then gets the users geo-location and centres it on the map.
What do I need to add to allow me to give the users direction to a fixed location (this won't change) from the users geo-location?
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've 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 seem to be working.
-
Sagar Bhosale over 9 yearsIts working fine.But how can i customize my tooltip marker of my home position?Lets say Suppose I want to display my institute name at destination?