Skip to main content
GuidesAPI ReferenceExamples

Routes & Navigation - 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 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:

function initMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 7,
        center: { lat: 38.7231, lng: -9.1342 },
    });

    directionsRenderer.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsRenderer);
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
    directionsService
        .route({
            origin: new google.maps.LatLng(38.7231, -9.1342),
            destination: new google.maps.LatLng(40.4188, -3.6960),
            travelMode: google.maps.TravelMode.DRIVING,
        })
        .then((response) => {
            directionsRenderer.setDirections(response);
        })
        .catch((e) => window.alert("Directions request failed due to " + status));
}

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:

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

var defaultAppScreen = gem.core.App.initAppScreen({
    container: "map-canvas",
    center: [38.7231, -9.1342, 700000] // latitude , longitude, altitude
});
var resultCb = function (routeResult) {
// do something when route finishes calculating
}
var defaultRoute = new gem.control.RouteControl({
    waypoints: [
        { latitude: 38.7231, longitude: -9.1342, altitude: 0, bearing: 0.0 },
        { latitude: 40.4188, longitude: -3.6960, altitude: 0, bearing: 0.0 }],
    preferences: {
        buildTerrainProfile: false,
        transportMode: gem.routesAndNavigation.ERouteTransportMode.ETM_Car,
        avoidTraffic: true
    },
    resultCallback: resultCb
});
defaultAppScreen.addControl(defaultRoute);

See the example fullscreen
The route labels are interactive and can be clicked to select a different active/main route.

JavaScript Examples​

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