Hi Yisrael
This looks just like what I think I’ll need!
Every time I think I’m getting to the ‘finished’ part of my website, something else just pops up!
I can’t seem to get the map to show however? It just displays a white square. This is what I’ve got from your example. Would you know where am I going wrong?
Back end file:
import wixData from 'wix-data';
export function getLocations() {
return wixData.query("properties") // 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('#text127').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.price, position: {lat: loc.latitude, lng: loc.longitude}}); // wanted property price as title
}
$w('#html1').postMessage({markers});
});
}
In my html code: With swapped code (just swapped out for purpose of post)
<html>
<head>
<title>Wix Code / Google Maps :: Multiple Markers</title>
</head>
<body>
<div id="map" style="height: 100%; width: 100%;" />
<script type="text/javascript">
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: 2,
center: {lat: 41.38506389999999, lng: 2.1734035} // Barcelona 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 = locations.map(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' });
}
}
}
</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=MY-CODE-PASTED-HERE&callback=init">
</script>
</body>
</html>
All it’s displaying however is white box (even in preview mode)
Many thanks for any help! (again)
Thomas 
it was an issue with the Key, it wasn’t registered in use.
