Vorbly Code | WIX CODE GOOGLE MAPS WITH MULTIPLE MARKERS

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

1/1

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP