Switch from Google Maps to Magic Lane Platform

_{Estimated reading time: 3 minutes}

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

JavaScript
HTML
CSS

let map;

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 48.207, lng: 16.371 },
        zoom: 8,
    });
}

<html>
<head>
    <title>Google Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
</head>
<body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
    async
    ></script>
</body>
</html>

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
    height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

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:

JavaScript
HTML

// Start by setting your token from https://developer.magiclane.com/api/projects
gem.core.App.token="your_API_key_token";

let defaultAppScreen = gem.core.App.initAppScreen(
{
    container: "map-canvas",
    center: [48.207, 16.371, 0], // lat, lon, altitude
    zoom: 8
}
);

<html>
<head>
    <meta charset="utf-8" />
    <title>Display Map - MagicLane Maps SDK for JavaScript</title>
    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css" />
</head>

<body>
    <div id="map-canvas" style="width: 100%; height: 100%; position: absolute;"></div>
    <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
    <script type="text/javascript" src="token.js"></script>
    <script type="text/javascript" src="jsHelloMapBasic.js"></script>
</body>
</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

Google Maps​

Magic Lane Maps​

JavaScript Examples​

Google Maps

Magic Lane Maps

JavaScript Examples