Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE GOOGLE MAPS WITH MULTIPLE MARKERS
Need a Google Map with multiple geolocation markers? This tutorial will show you how to add a Google Map with multiple locations from a Wix database. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Create a database for store locations (latitude and longitude) and store details (e.g. address, phone). Then add a HTML iframe with HTML code to your webpage. Next, add a Wix Repeater to display store information.
Create a database for store locations (latitude and longitude) and store details (e.g. address, phone). Then add a HTML iframe with HTML code to your webpage. Next, add a Wix Repeater to display store information.
THE ELEMENTS
The Page
HTML iframe: #html1 (embed Google Maps)
Repeater: #repeater1 (display store details)
Google Maps API Key
Go to Google Maps Developer and retrieve your API key.
The Database
Create a database: StoreLocations (dataset1)
Recommended fields:
-
Geolocation Latitude: latitude
-
Geolocation Longitude: longitude
-
Store Name: name
-
Store Address: address
-
Opening hours: hours
-
Store Phone Number: phone
Tip: You can use Google Maps or other online tools to find the latitude and longitude of addresses.
Backend Web Module
Create a backend web module (markers.jsw).
THE CODE
Page Code
import {getMarkersData} from 'backend/markers';
$w.onReady(function () {
let obj;
obj = getMarkersData().then((obj) => {
let long;
let lat;
let markersArr = [];
long = obj["items"].map((item) => {return item["longitude"]});
lat = obj["items"].map((item) => {return item["latitude"]});
//num of current assets
let iterator = long.length;
for (let i = 0; i < iterator; i++) {
let cordItem = new Object({lat: '', lng: ''});
cordItem['lat'] = lat[i];
cordItem['lng'] = long[i];
markersArr.push({position: cordItem});
}
$w('#html1').postMessage({markersArr});
});
});
HTML iframe
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body onLoad = "init()">
<div id="map"></div>
<script>
var markersData = [];
function init() {
window.onmessage = (event) => {
if (event.data) {
console.log(event.data.markersArr);
markersData = event.data.markersArr;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: markersData[0].position
});
markersData.forEach((geoCords)=> {
let i = new google.maps.Marker({
position: geoCords.position,
map: map
})})
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init">
</script>
</body>
</html>
Back-End Code
// markers.jsw //
import wixData from 'wix-data';
export function getMarkersData() {
return wixData.query("StoreLocations")
.find()
.then((results) => { return results; })
.catch((err) => { let errorMsg = err; });
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Please complete all required fields.
No comments. Be the first to leave a comment.
Hi thanks for the code. I am getting a warning in the code that
obj is already declared but it is not.
obj = getMarkersData().then((obj) => {
freddy
May 12, 2020
3
this works like a charm but only stays on screen for a second before "crashing"
m
Apr 24, 2021
0