Multiple location from the 1 database, what is mistake in my code?

Ask the community
,
1

Hi Guys, I am trying to show multiple location from 1 database. Below is my code but it is not working. There is no error but when i do preview, it says “oops something went wrong”. I have checked API… below is my code:

What is wrong with it, if any?

BACKEND CODE

import wixData from ‘wix-data’;
export function getLocations() {
return wixData.query(“propertybuy”) // the database to query is ‘properties’
.find()
.then((results) => {
return results.items; // items is an array of locations from the collection
})
. catch ((err) => {
let errorMsg = err;
});
}

PAGE CODE

import {getLocations} from ‘backend/locations’;

$w.onReady( function () {
sendLocations();
$w(“#html1”).onMessage( (event) => {
if (event.data === ‘hello’) {
sendLocations();
}
else {
$w(‘#text45’).text = "Currently Veiwing: " + event.data;
}
} );
});

function sendLocations() {
getLocations().then((locations) => {
let markers = ;
for ( let i = 0; i < locations.length; i++) {
let loc = locations[i];
markers.push({title: loc.title, position: {lat: loc.latitude, lng: loc.longitude}}); // wanted property price as title
}
$w(‘#html1’).postMessage({markers});
});
}

HTML CODE

Wix Code / Google Maps :: Multiple Markers 
let gurugram = {lat: 28.4595, lng: 77.0266}; 

 /** 
   * The RestoreControl adds a control to the map that resets the zoom, 
   * and recenters the map on Gurugram. 
   * This constructor takes the control DIV as an argument. 
   * @constructor 
   */ 
   function RestoreControl(controlDiv, map) { 
        // Set CSS for the control border. 
        var controlUI = document.createElement('div'); 
        controlUI.style.backgroundColor = '#fff'; 
        controlUI.style.border = '2px solid #fff'; 
        controlUI.style.borderRadius = '3px'; 
        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; 
        controlUI.style.cursor = 'pointer'; 
        controlUI.style.marginBottom = '22px'; 
        controlUI.style.textAlign = 'center'; 
        controlUI.title = 'Click to reset the map'; 
        controlDiv.appendChild(controlUI); 

        // Set CSS for the control interior. 
        var controlText = document.createElement('div'); 
        controlText.style.color = 'rgb(25,25,25)'; 
        controlText.style.fontFamily = 'Helvetic Light,sans-serif'; 
        controlText.style.fontSize = '12px'; 
        controlText.style.lineHeight = '20px'; 
        controlText.style.paddingLeft = '5px'; 
        controlText.style.paddingRight = '5px'; 
        controlText.innerHTML = 'Restore Map'; 
        controlUI.appendChild(controlText); 

        // Setup the click event listeners: simply set the map to Gurugram. 
        controlUI.addEventListener('click', function() { 
            map.setCenter(gurugram); 
            map.setZoom(5); 
        }); 
    } 

    let locations = null; 
    function init() { 
        if(locations === null) { // if no locations, let page know 
            window.parent.postMessage("hello", "*"); 
        } 
        window.onmessage = (event) => { 
            if (event.data) { 
                locations = event.data.markers; 
                let infowindow = new google.maps.InfoWindow(); 
                let map = new google.maps.Map(document.getElementById('map'), { 
                    zoom: 10, 
                    streetViewControl: true, 
                    center: gurugram  //{lat: 41.38506389999999, lng: 2.1734035}    // Gurugram is a good center point 
                }); 

                // Add the markers to the map. 
                // Note: The code uses the JavaScript Array.prototype.map() method to 
                // create an array of markers based on a given "locations" array. 
                // The map() method here has nothing to do with the Google Maps API. 
                var markers = (function (location) { 
                    let marker = new google.maps.Marker({ 
                        position: location.position, 
                        map: map 
                    }) 
                    google.maps.event.addListener(marker, 'mouseover', (function (marker) { 
                        return function () { 
                            infowindow.setContent(location.title); 
                            infowindow.open(map, marker); 
                        } 
                    })(marker)); 
                    google.maps.event.addListener(marker, 'mouseout', (function (marker) { 
                        return function () { 
                            infowindow.close(); 
                        } 
                    })(marker)); 
                    google.maps.event.addListener(marker, 'click', (function (marker) { 
                        window.parent.postMessage(location.title, "*"); 
                    })); 
                    return marker; 
                }); 

                // Add a marker clusterer to manage the markers. 
                var markerCluster = new MarkerClusterer(map, markers, 
                    { gridSize: 20, maxZoom: 3, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); 

                // Create the DIV to hold the control and call the CenterControl() 
                // constructor passing in this DIV. 
                var restoreControlDiv = document.createElement('div'); 
                var restoreControl = new RestoreControl(restoreControlDiv, map); 

                restoreControlDiv.index = 1; 
                map.controls[google.maps.ControlPosition.TOP_CENTER].push(restoreControlDiv);                         
            } 
        } 
    } 
</script> 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
</script>     
<script async defer  [src="https://maps.googleapis.com/maps/api/js?key](src="https://maps.googleapis.com/maps/api/js?key=) [u]=[/u] API KEY&callback=init"> 
</script>