Store Locator - Switch from Google Maps to Magic Lane Platform ¶
In this guide you will learn how to switch from a simple store locator using Google Maps JavaScript API to using Magic Lane JavaScript API.Google Maps Simple Store Locator ¶
To create a map which displays store locations from a GeoJSON data source using the Google Places JavaScript API you would write something like the following example code from Google Maps Simple Store Locator : 1 function initMap() {
2 // Create the map.
3 const map = new google.maps.Map(document.getElementById('map'), {
4 zoom: 7,
5 center: { lat: 52.632469, lng: -1.689423 },
6 });
7
8 // Load the stores GeoJSON onto the map.
9 map.data.loadGeoJson('stores.json', {idPropertyName: 'storeid'});
10
11 // Define the custom marker icons, using the store's "category".
12 map.data.setStyle((feature) => {
13 return {
14 icon: {
15 url: `img/icon_${feature.getProperty('category')}.png`,
16 scaledSize: new google.maps.Size(64, 64),
17 },
18 };
19 });
20
21 const apiKey = 'YOUR_API_KEY';
22 const infoWindow = new google.maps.InfoWindow();
23
24 // Show the information for a store when its marker is clicked.
25 map.data.addListener('click', (event) => {
26 const category = event.feature.getProperty('category');
27 const name = event.feature.getProperty('name');
28 const description = event.feature.getProperty('description');
29 const hours = event.feature.getProperty('hours');
30 const phone = event.feature.getProperty('phone');
31 const position = event.feature.getGeometry().get();
32 const content = `
33 <h2>${name}</h2><p>${description}</p>
34 <p><b>Open:</b> ${hours}<br/><b>Phone:</b> ${phone}</p>
35 `;
36
37 infoWindow.setContent(content);
38 infoWindow.setPosition(position);
39 infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
40 infoWindow.open(map);
41 });
42
43 // Build and add the search bar
44 const card = document.createElement('div');
45 const titleBar = document.createElement('div');
46 const title = document.createElement('div');
47 const container = document.createElement('div');
48 const input = document.createElement('input');
49 const options = {
50 types: ['address'],
51 componentRestrictions: {country: 'gb'},
52 };
53
54 card.setAttribute('id', 'pac-card');
55 title.setAttribute('id', 'title');
56 title.textContent = 'Find the nearest store';
57 titleBar.appendChild(title);
58 container.setAttribute('id', 'pac-container');
59 input.setAttribute('id', 'pac-input');
60 input.setAttribute('type', 'text');
61 input.setAttribute('placeholder', 'Enter an address');
62 container.appendChild(input);
63 card.appendChild(titleBar);
64 card.appendChild(container);
65 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
66
67 // Make the search bar into a Places Autocomplete search bar and select
68 // which detail fields should be returned about the place that
69 // the user selects from the suggestions.
70 const autocomplete = new google.maps.places.Autocomplete(input, options);
71
72 autocomplete.setFields(
73 ['address_components', 'geometry', 'name']);
74
75 // Set the origin point when the user selects an address
76 const originMarker = new google.maps.Marker({map: map});
77 originMarker.setVisible(false);
78 let originLocation = map.getCenter();
79
80 autocomplete.addListener('place_changed', async () => {
81 originMarker.setVisible(false);
82 originLocation = map.getCenter();
83 const place = autocomplete.getPlace();
84
85 if (!place.geometry) {
86 // User entered the name of a Place that was not suggested and
87 // pressed the Enter key, or the Place Details request failed.
88 window.alert('No address available for input: \'' + place.name + '\'');
89 return;
90 }
91
92 // Recenter the map to the selected address
93 originLocation = place.geometry.location;
94 map.setCenter(originLocation);
95 map.setZoom(9);
96 console.log(place);
97
98 originMarker.setPosition(originLocation);
99 originMarker.setVisible(true);
100
101 // Use the selected address as the origin to calculate distances
102 // to each of the store locations
103 const rankedStores = await calculateDistances(map.data, originLocation);
104 showStoresList(map.data, rankedStores);
105
106 return;
107 });
108 }
109
110 async function calculateDistances(data, origin) {
111 const stores = [];
112 const destinations = [];
113
114 // Build parallel arrays for the store IDs and destinations
115 data.forEach((store) => {
116 const storeNum = store.getProperty('storeid');
117 const storeLoc = store.getGeometry().get();
118
119 stores.push(storeNum);
120 destinations.push(storeLoc);
121 });
122
123 // Retrieve the distances of each store from the origin
124 // The returned list will be in the same order as the destinations list
125 const service = new google.maps.DistanceMatrixService();
126 const getDistanceMatrix =
127 (service, parameters) => new Promise((resolve, reject) => {
128 service.getDistanceMatrix(parameters, (response, status) => {
129 if (status != google.maps.DistanceMatrixStatus.OK) {
130 reject(response);
131 } else {
132 const distances = [];
133 const results = response.rows[0].elements;
134 for (let j = 0; j < results.length; j++) {
135 const element = results[j];
136 const distanceText = element.distance.text;
137 const distanceVal = element.distance.value;
138 const distanceObject = {
139 storeid: stores[j],
140 distanceText: distanceText,
141 distanceVal: distanceVal,
142 };
143 distances.push(distanceObject);
144 }
145
146 resolve(distances);
147 }
148 });
149 });
150
151 const distancesList = await getDistanceMatrix(service, {
152 origins: [origin],
153 destinations: destinations,
154 travelMode: 'DRIVING',
155 unitSystem: google.maps.UnitSystem.METRIC,
156 });
157
158 distancesList.sort((first, second) => {
159 return first.distanceVal - second.distanceVal;
160 });
161
162 return distancesList;
163 }
164
165 function showStoresList(data, stores) {
166 if (stores.length == 0) {
167 console.log('empty stores');
168 return;
169 }
170
171 let panel = document.createElement('div');
172 // If the panel already exists, use it. Else, create it and add to the page.
173 if (document.getElementById('panel')) {
174 panel = document.getElementById('panel');
175 // If panel is already open, close it
176 if (panel.classList.contains('open')) {
177 panel.classList.remove('open');
178 }
179 } else {
180 panel.setAttribute('id', 'panel');
181 const body = document.body;
182 body.insertBefore(panel, body.childNodes[0]);
183 }
184
185
186 // Clear the previous details
187 while (panel.lastChild) {
188 panel.removeChild(panel.lastChild);
189 }
190
191 stores.forEach((store) => {
192 // Add store details with text formatting
193 const name = document.createElement('p');
194 name.classList.add('place');
195 const currentStore = data.getFeatureById(store.storeid);
196 name.textContent = currentStore.getProperty('name');
197 panel.appendChild(name);
198 const distanceText = document.createElement('p');
199 distanceText.classList.add('distanceText');
200 distanceText.textContent = store.distanceText;
201 panel.appendChild(distanceText);
202 });
203
204 // Open the panel
205 panel.classList.add('open');
206
207 return;
208 }
1 <html>
2
3 <head>
4 <title>Google Store Locator</title>
5 <style>
6 #map {
7 height: 100%;
8 }
9
10 html,
11 body {
12 height: 100%;
13 margin: 0;
14 padding: 0;
15 }
16
17 /* Styling for Autocomplete search bar */
18 #pac-card {
19 background-color: #fff;
20 border-radius: 2px 0 0 2px;
21 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
22 box-sizing: border-box;
23 font-family: Roboto;
24 margin: 10px 10px 0 0;
25 -moz-box-sizing: border-box;
26 outline: none;
27 }
28
29 #pac-container {
30 padding-top: 12px;
31 padding-bottom: 12px;
32 margin-right: 12px;
33 }
34
35 #pac-input {
36 background-color: #fff;
37 font-family: Roboto;
38 font-size: 15px;
39 font-weight: 300;
40 margin-left: 12px;
41 padding: 0 11px 0 13px;
42 text-overflow: ellipsis;
43 width: 400px;
44 }
45
46 #pac-input:focus {
47 border-color: #4d90fe;
48 }
49
50 #title {
51 color: #fff;
52 background-color: #acbcc9;
53 font-size: 18px;
54 font-weight: 400;
55 padding: 6px 12px;
56 }
57
58 .hidden {
59 display: none;
60 }
61
62 /* Styling for an info pane that slides out from the left.
63 * Hidden by default. */
64 #panel {
65 height: 100%;
66 width: null;
67 background-color: white;
68 position: fixed;
69 z-index: 1;
70 overflow-x: hidden;
71 transition: all .2s ease-out;
72 }
73
74 .open {
75 width: 250px;
76 }
77
78 .place {
79 font-family: 'open sans', arial, sans-serif;
80 font-size: 1.2em;
81 font-weight: 500;
82 margin-block-end: 0px;
83 padding-left: 18px;
84 padding-right: 18px;
85 }
86
87 .distanceText {
88 color: silver;
89 font-family: 'open sans', arial, sans-serif;
90 font-size: 1em;
91 font-weight: 400;
92 margin-block-start: 0.25em;
93 padding-left: 18px;
94 padding-right: 18px;
95 }
96 </style>
97 </head>
98
99 <body>
100 <!-- The div to hold the map -->
101 <div id="map"></div>
102
103 <script src="app.js"></script>
104 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
105 </script>
106 </body>
107
108 </html>
Magic Lane Store Locator Example ¶
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 create a store locator using a GeoJSON data source you would write something similar to the following example code:
1 // Start by setting your token from https://developer.magiclane.com/api/projects
2 if (gem.core.App.token === undefined)
3 gem.core.App.token = "";
4
5 var defaultAppScreen = gem.core.App.initAppScreen({
6 container: "map-canvas"
7 });
8 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Oslo_Shops_from_OpenTripMap.geojson", "" /*icon default*/, "" /*no icon filter*/,
9 {
10 markerBubble: {
11 title: ['name'],
12 image: ['preview']
13 }
14 });
15 defaultAppScreen.addControl(geojsonDataControl);
16
17 let listUIControl = new gem.control.ListControl({
18 sourceControl: geojsonDataControl,
19 container: 'menu-list-container',
20 menuName: 'Store Locator Example',
21 titleProperties: ['name'], // GeoJSON property keys to use for store title
22 detailsProperties: ['kinds'], // GeoJSON property keys to use for store details
23 imageProperty: ['preview'] // GeoJSON property key to use for store image
24 });
25 defaultAppScreen.addControl(listUIControl);
26
27 let searchControl = new gem.control.SearchControl({
28 highlightOptions: {
29 contourColor: { r: 0, g: 255, b: 0, a: 0 }
30 },
31 searchPreferences: {
32 exactMatch: true,
33 maximumMatches: 3,
34 addressSearch: true,
35 mapPoisSearch: true,
36 setCursorReferencePoint: true
37 }
38 });
39 defaultAppScreen.addControl(searchControl);
1 <!doctype html>
2 <html lang="en-us">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no" />
7 <title>Store Locator using a GeoJSON data source - Maps SDK for JavaScript</title>
8 <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
9 </head>
10
11 <body>
12 <div id="store-locator" style="width: 100%; height: 100%">
13 <div id="menu-list-container" class="menu-list-container"
14 style="width: 30%; height: 100%; left: 70%; position: absolute;"></div>
15 <div id="map-canvas" style="width: 70%; right: 30%; height: 100%; position:absolute; overflow:hidden"></div>
16 </div>
17
18 <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
19 <script type="text/javascript" src="token.js"></script>
20 <script type="text/javascript" src="jsStoreGeojsonFile.js"></script>
21
22 </body>
23 </html>