Routes & Navigation - Switch from Google Maps to Magic Lane Platform ¶
In this guide you will learn how to switch from a simple route display using Google Maps JavaScript API to using Magic Lane JavaScript API.Google Maps Directions ¶
To display directions between two different locations on a simple map using the Google Directions JavaScript API you would write something similar to the following example code adapted from Google Directions Sample : 1function initMap() {
2 const directionsService = new google.maps.DirectionsService();
3 const directionsRenderer = new google.maps.DirectionsRenderer();
4 const map = new google.maps.Map(document.getElementById("map"), {
5 zoom: 7,
6 center: { lat: 38.7231, lng: -9.1342 },
7 });
8
9 directionsRenderer.setMap(map);
10 calculateAndDisplayRoute(directionsService, directionsRenderer);
11}
12
13function calculateAndDisplayRoute(directionsService, directionsRenderer) {
14 directionsService
15 .route({
16 origin: new google.maps.LatLng(38.7231, -9.1342),
17 destination: new google.maps.LatLng(40.4188, -3.6960),
18 travelMode: google.maps.TravelMode.DRIVING,
19 })
20 .then((response) => {
21 directionsRenderer.setDirections(response);
22 })
23 .catch((e) => window.alert("Directions request failed due to " + status));
24}
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Google Directions Service</title>
5 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6 <link rel="stylesheet" type="text/css" href="./style.css" />
7 <script src="./index.js"></script>
8 </head>
9 <body>
10 <div id="map"></div>
11
12 <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
13 <script
14 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
15 async
16 ></script>
17 </body>
18</html>
1/* Always set the map height explicitly to define the size of the div
2 * element that contains the map. */
3#map {
4 height: 100%;
5}
6
7/* Optional: Makes the sample page fill the window. */
8html,
9body {
10 height: 100%;
11 margin: 0;
12 padding: 0;
13}
14
15#floating-panel {
16 position: absolute;
17 top: 10px;
18 left: 25%;
19 z-index: 5;
20 background-color: #fff;
21 padding: 5px;
22 border: 1px solid #999;
23 text-align: center;
24 font-family: "Roboto", "sans-serif";
25 line-height: 30px;
26 padding-left: 10px;
27}
Magic Lane Routes ¶
The first step is to set your API key token
gem.core.App.token
,
which you can get at the Magic Lane website,
see the
Getting Started
tutorial.
You only need to type your email address and create a new password.
To display a simple route on a map using the Magic Lane JavaScript API you would write something similar to the example code below:
1 // Start by setting your token from https://developer.magiclane.com/api/projects
2 gem.core.App.token="your_API_key_token";
3
4 var defaultAppScreen = gem.core.App.initAppScreen({
5 container: "map-canvas",
6 center: [38.7231, -9.1342, 700000] // latitude , longitude, altitude
7 });
8 var resultCb = function (routeResult) {
9 // do something when route finishes calculating
10 }
11 var defaultRoute = new gem.control.RouteControl({
12 waypoints: [
13 { latitude: 38.7231, longitude: -9.1342, altitude: 0, bearing: 0.0 },
14 { latitude: 40.4188, longitude: -3.6960, altitude: 0, bearing: 0.0 }],
15 preferences: {
16 buildTerrainProfile: false,
17 transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Car,
18 avoidTraffic: true
19 },
20 resultCallback: resultCb
21 });
22 defaultAppScreen.addControl(defaultRoute);
1 <html>
2 <head>
3 <meta charset="utf-8" />
4 <title>Route Display - MagicLane Maps SDK for JavaScript</title>
5 <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css" />
6 </head>
7
8 <body>
9 <div id="map-canvas" style="width: 100%; height: 100%; position: absolute;"></div>
10
11 <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
12 <script type="text/javascript" src="token.js"></script>
13 <script type="text/javascript" src="jsHelloRoute.js"></script>
14 </body>
15 </html>
The route labels are interactive and can be clicked to select a different active/main route.