Skip to content

Places - Switch from Google Maps to Magic Lane Platform

In this guide you will learn how to switch from a simple route 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:
 1// This example adds a search box to a map, using the Google Place Autocomplete
 2// feature. People can enter geographical searches. The search box will return a
 3// pick list containing a mix of places and predicted search terms.
 4// This example requires the Places library. Include the libraries=places
 5// parameter when you first load the API. For example:
 6// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
 7function initAutocomplete() {
 8  const map = new google.maps.Map(document.getElementById("map"), {
 9    center: { lat: -33.8688, lng: 151.2195 },
10    zoom: 13,
11    mapTypeId: "roadmap",
12  });
13  // Create the search box and link it to the UI element.
14  const input = document.getElementById("pac-input");
15  const searchBox = new google.maps.places.SearchBox(input);
16
17  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
18  // Bias the SearchBox results towards current map's viewport.
19  map.addListener("bounds_changed", () => {
20    searchBox.setBounds(map.getBounds());
21  });
22
23  let markers = [];
24
25  // Listen for the event fired when the user selects a prediction and retrieve
26  // more details for that place.
27  searchBox.addListener("places_changed", () => {
28    const places = searchBox.getPlaces();
29
30    if (places.length == 0) {
31      return;
32    }
33
34    // Clear out the old markers.
35    markers.forEach((marker) => {
36      marker.setMap(null);
37    });
38    markers = [];
39
40    // For each place, get the icon, name and location.
41    const bounds = new google.maps.LatLngBounds();
42
43    places.forEach((place) => {
44      if (!place.geometry || !place.geometry.location) {
45        console.log("Returned place contains no geometry");
46        return;
47      }
48
49      const icon = {
50        url: place.icon,
51        size: new google.maps.Size(71, 71),
52        origin: new google.maps.Point(0, 0),
53        anchor: new google.maps.Point(17, 34),
54        scaledSize: new google.maps.Size(25, 25),
55      };
56
57      // Create a marker for each place.
58      markers.push(
59        new google.maps.Marker({
60          map,
61          icon,
62          title: place.name,
63          position: place.geometry.location,
64        })
65      );
66      if (place.geometry.viewport) {
67        // Only geocodes have viewport.
68        bounds.union(place.geometry.viewport);
69      } else {
70        bounds.extend(place.geometry.location);
71      }
72    });
73    map.fitBounds(bounds);
74  });
75}

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Google Places Search Box</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    <input
11      id="pac-input"
12      class="controls"
13      type="text"
14      placeholder="Search Box"
15    />
16    <div id="map"></div>
17
18    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
19    <script
20      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
21      async
22    ></script>
23  </body>
24</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}
14
15#description {
16  font-family: Roboto;
17  font-size: 15px;
18  font-weight: 300;
19}
20
21#infowindow-content .title {
22  font-weight: bold;
23}
24
25#infowindow-content {
26  display: none;
27}
28
29#map #infowindow-content {
30  display: inline;
31}
32
33.pac-card {
34  margin: 10px 10px 0 0;
35  border-radius: 2px 0 0 2px;
36  box-sizing: border-box;
37  -moz-box-sizing: border-box;
38  outline: none;
39  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
40  background-color: #fff;
41  font-family: Roboto;
42}
43
44#pac-container {
45  padding-bottom: 12px;
46  margin-right: 12px;
47}
48
49.pac-controls {
50  display: inline-block;
51  padding: 5px 11px;
52}
53
54.pac-controls label {
55  font-family: Roboto;
56  font-size: 13px;
57  font-weight: 300;
58}
59
60#pac-input {
61  background-color: #fff;
62  font-family: Roboto;
63  font-size: 15px;
64  font-weight: 300;
65  margin-left: 12px;
66  padding: 0 11px 0 13px;
67  text-overflow: ellipsis;
68  width: 400px;
69}
70
71#pac-input:focus {
72  border-color: #4d90fe;
73}
74
75#title {
76  color: #fff;
77  background-color: #4d90fe;
78  font-size: 25px;
79  font-weight: 500;
80  padding: 6px 12px;
81}
82
83#target {
84  width: 345px;
85}

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:

 1 // Start by setting your token from https://developer.magiclane.com/api/projects
 2     gem.core.App.token = "your_API_key_token";
 3 let defaultAppScreen = gem.core.App.initAppScreen(
 4     {
 5             container: "map-canvas",
 6             center: [48.8612, 2.333, 7000000] // latitude , longitude, altitude
 7     }
 8 );
 9 let searchControl = new gem.control.SearchControl();
10 defaultAppScreen.addControl(searchControl);

 1 <html>
 2
 3 <head>
 4   <meta charset="utf-8">
 5   <title>Search Places - MagicLane Maps SDK for JavaScript</title>
 6   <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 7 </head>
 8
 9 <body>
10   <div id="map-canvas" style="width: 100%; height: 100%; position: absolute;">
11   </div>
12   <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
13   <script type="text/javascript" src="token.js"></script>
14   <script type="text/javascript" src="jsHelloSearch.js"></script>
15 </body>
16
17 </html>
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