Skip to main content
GuidesAPI ReferenceExamples

Places- Switch from Google Maps to Magic Lane Platform

Estimated reading time: 5 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 Places​

To create a map with a locations search box using the Google Places JavaScript API you would write something like the following example code adapted from Google Places Search Box Sample:

// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13,
    mapTypeId: "roadmap",
});
// Create the search box and link it to the UI element.
const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);

map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
});

let markers = [];

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
    const places = searchBox.getPlaces();

    if (places.length == 0) {
        return;
    }

    // Clear out the old markers.
    markers.forEach((marker) => {
        marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();

    places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
        console.log("Returned place contains no geometry");
        return;
    }

    const icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
        new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
        })
    );
    if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
    } else {
        bounds.extend(place.geometry.location);
    }
    });
    map.fitBounds(bounds);
});
}

Magic Lane Places​

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 add map locations search box on a simple map you would write something similar to the following example code:

// 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.8612, 2.333, 7000000] // latitude , longitude, altitude
    }
);
let searchControl = new gem.control.SearchControl();
defaultAppScreen.addControl(searchControl);

See the example fullscreen

The style and functionality of the places search box can be further customized. To see some of the options available check out the guide Free Text Search for more details.

JavaScript Examples​

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