6

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.

2 Answers 2

12

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);
       }
     });
   });
 }
1
  • Its 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? Commented Nov 10, 2014 at 10:15
0

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

You can find sample code here- https://developers.google.com/maps/documentation/javascript/directions#DisplayingResults

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.