Satnav like directions embedding into a website

Question

Is there a way of embedding a Sat-Nav geolocation type mapping into a website?Basically giving you turn by turn realtime directions.

Like this

I am aware that the Google Maps app has this functionality but I need this implementing into a website, any guidance would be great.

Thanks

You mean like this: https://developers.google.com/maps/documentation/javascript/examples/directions-panel ? — duncan, Jun 27 '16 at 10:20
Kind of but it needs to have the arrow displaying your location and orientation, just like a sat nav :) — Shaun Hearnden, Jun 27 '16 at 10:27

Craicerjack · Answer 1 · 2016-06-27T12:02:32.757

Google maps, not just the app, has this functionality.
You can use their JavaScript API
You can find examples and documentation at their api.
For directions you will need to use their directions service

To use directions in the Google Maps JavaScript API, create an object of type DirectionsService and call DirectionsService.route() to initiate a request to the Directions service, passing it a DirectionsRequest object literal containing the input terms and a callback method to execute upon receipt of the response.

The DirectionsRequest object literal contains the following fields:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Initiating a directions request to the DirectionsService with the route() method requires passing a callback which executes upon completion of the service request. This callback will return a DirectionsResult and a DirectionsStatus code in the response.

The following example will make a directions request and display the response in the directionsPanel div

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

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

In the HTML body:

<div id="map" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/12823561) — Oleg V. Volkov, Jun 27 '16 at 10:42
@OlegV.Volkov This I can understand but I with the question being as broad as it is I dont know if there are essential parts, or if I'd just be copying whole pages of googles api docs. — Craicerjack, Jun 27 '16 at 11:54

Satnav like directions embedding into a website

1 Answers1