×
Routes & Navigation - Switch from Google Maps to General Magic Platform | Maps SDK for JavaScript | General Magic Routes & Navigation - Switch from Google Maps to General Magic Platform — Maps & Navigation SDKs documentation
Skip to content

Routes & Navigation - Switch from Google Maps to General Magic Platform

In this guide you will learn how to switch from a simple route display using Google Maps JavaScript API to using General Magic 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}

General Magic Routes

The first step is to set your API key token gem.core.App.token, which you can get at the General Magic 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 General Magic JavaScript API you would write something similar to the example code below:

 1 // Start by setting your token from https://developer.generalmagic.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 - GeneralMagic Maps SDK for JavaScript</title>
 5     <link rel="stylesheet" type="text/css" href="https://www.generalmagic.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.generalmagic.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 can be interacted with to select a different active route.