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

Switch from Google Maps to General Magic Platform

In this guide you will learn how to switch from a simple map display using Google Maps JavaScript API to using General Magic JavaScript API.

Google Maps

To display a simple map using the Google Maps JavaScript API you would initialize it similarly to this example code from Google Simple Map:
1let map;
2
3function initMap() {
4  map = new google.maps.Map(document.getElementById("map"), {
5    center: { lat: 48.207, lng: 16.371 },
6    zoom: 8,
7  });
8}
 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Google Simple Map</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. */
 8 html,
 9 body {
10   height: 100%;
11   margin: 0;
12   padding: 0;
13 }

General Magic Maps

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 interactive map using the General Magic JavaScript API you would initialize it similarly to the following example code:

 1 // Start by setting your token from https://developer.generalmagic.com/api/projects
 2 gem.core.App.token="your_API_key_token";
 3
 4 let defaultAppScreen = gem.core.App.initAppScreen(
 5   {
 6     container: "map-canvas",
 7     center: [48.207, 16.371, 0], // lat, lon, altitude
 8     zoom: 8
 9   }
10 );
 1<html>
 2  <head>
 3    <meta charset="utf-8" />
 4    <title>Display Map - 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    <script type="text/javascript" src="https://www.generalmagic.com/sdk/js/gemapi.js"></script>
11    <script type="text/javascript" src="token.js"></script>
12    <script type="text/javascript" src="jsHelloMapBasic.js"></script>
13  </body>
14</html>
The map can be zoomed in, zoomed out, dragged or pannned.