Magic Lane
Close navbar icon
Skip to content

Switch from Google Maps to Magic Lane Platform

In this guide you will learn how to switch from a simple map display using Google Maps JavaScript API to using Magic Lane 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. */
 8html,
 9body {
10  height: 100%;
11  margin: 0;
12  padding: 0;
13}

Magic Lane Maps

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

 1// Start by setting your token from https://developer.magiclane.com/api/projects
 2gem.core.App.token="your_API_key_token";
 3
 4let 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 - 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    <script type="text/javascript" src="https://www.magiclane.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>
See the example fullscreen
The map is interactive and supports pan and zoom.

JavaScript Examples

Maps SDK for JavaScript Examples can be downloaded or cloned with Git