Hello @david-seroy @jason-wadsworth @palombo-kevin @dafna-kotzer
I have followed through this code and since i am trying to implement the same thing, i am not sure where i am going wrong. please take some few minutes and let me know.
My Target
I want to query locations: tribe, latitude & Longitude from a collection called EasternAfrica and display on the google maps with on click action on the locations where it should load some page or collection.
Backend Code:
import wixData from ‘wix-data’ ;
export function getLocations() {
return wixData.query( “EasternAfrica” )
.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 () {
mapItems();
$w( “#html2” ).onMessage( (event) => {
if (event.data === ‘hello’ ) {
mapItems();
}
else {
//$w(‘#txtLocationClicked’).text = "Clicked on the Wix Office location: " + event.data;
}
} );
});
async function mapItems (projItems2) {
let itemsCount = projItems2.length;
let locations = ;
let requests = 0 ;
for ( var i = 0 ; i < itemsCount; i++) {
requests++;
locations.push({
“info” : projItems2[i][ “tribe” ],
“lat” : projItems2[i][ “latitude” ],
“long” :projItems2[i][ “longitude” ],
“count” : projItems2[i][ “_id” ],
});
if (requests === itemsCount) {
let json_locations = JSON.stringify(locations);
$w( “#html2” ).postMessage(json_locations);
}
}
}
HTML CODE:
Google Maps APIs
<div id= "map" ></div>
<script src= "script.js" ></script>
<script **async** defer
src= "https://maps.googleapis.com/maps/api/js?key=AIzaSyCW4yYyApdHpWMfKjGUlN7Kja1gwGRyfRc&callback=initMap" ></script>
html,
body {
height: 100 %;
margin: 0 ;
padding: 0 ;
}
#map {
height: 100 %;
}
<script>
var markersArray = ;
window.onmessage = (event) => {
if (event.data) {
if (event.data === “clear” ) {
setMapOnAll( null );
} else {
let receivedData = event.data
let parsed_data = JSON.parse(receivedData);
window.parent.postMessage( “Test” , “*” );
initMap(parsed_data);
}
}
};
function initMap(receivedData) {
var locations = receivedData;
var map = new google.maps.Map(document.getElementById( ‘map’ ), {
zoom: 13 ,
center: new google.maps.LatLng( 35.223603 , - 80.836319 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({});
// var marker, i;
// Upper Bound
var markerIcon = {
url: ‘http://image.flaticon.com/icons/svg/252/252025.svg’ ,
scaledSize: new google.maps.Size( 40 , 40 ),
origin: new google.maps.Point( 0 , 0 ),
anchor: new google.maps.Point( 32 , 65 )
};
var markerLabel = " "
// Lower Bound
for (i = 0 ; i < locations.length; i++) {
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: markerIcon,
position: new google.maps.LatLng(locations[i].lat, locations[i]. long ),
label: {
text: markerLabel,
fontSize: “16px” ,
fontWeight: “bold”
},
labelAnchor: new google.maps.Point( 18 , 12 ),
labelClass: “my-custom-class-for-label”
});
markersArray.push(marker);
google.maps.event.addListener(marker, ‘click’ , ( function (marker, i) {
return function () {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
window.parent.postMessage(locations[i].count, “*” );
}
})(marker, i));
}
}
function setMapOnAll(map) {
for ( var i = 0 ; i < markersArray.length; i++) {
}
}
</script>
I get only a preview of a blank google map
