Hey
I have had the site aroundme.ai which is a Messenger Bot up and running since December 2017. On that page there is a map function where I loop through records and map them on a Google Map. Suddenly the markers stopped working and there is an error message about depreciation of something.
Any help would really help.
The page is here:
https://www.aroundme.ai/map
If you wanna help look at the developer console and you will see that I get records and they are sent to the #map component but then nothing happens.
Urgently need this to be solved.
PS It works when using preview but not on published sites DS
#map #htmlcomponent #data #googlemap #postMessage
Andreas, I also get the deprecation error on pages that do not use Google Mapping, so maybe they are unrelated. Pages still work, though. Maybe it´s a bad fix, I suddenly had some problems with things that used to work for more than half a year, then suddenly stopped. Maybe bump it, so Wix can have another look at it?
PS I also checked my site where I use HTML-component and postMessage extensively, but I see nothing strange, all works well. I hardly dare to ask, but are you sure you have checked that the component is fully loaded before you post a message? If not, there is the off chance that everything always worked well by accident (because you are on a fast connection and the html-component responded instantly). But this could have degraded. It´s a async process, took me weeks to solve my problem, months ago. Just trying to help you, in return for your help you offered me.
I will check, I know I tested different ways. Still strange that it stopped, have been working great until now.
Hey friend
I tried to change the callback from Google Maps API like below
function callWix(){
window.parent.postMessage("READY", "*");
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=MY-KEY&callback=callWix">
</script>
And then thought that when the script is loaded it should trigger the callback function callWix and that in return would query data collection and then send all to the html component. But I do get the same errors.
Okey finally found a solution that seem to work.
In the Wix Code part I have the below. The trick seemed to be to send something to html component to wake it up and then the html and the functions are running inside the html component.
import wixData from "wix-data";
$w.onReady(function () {
$w("#map").postMessage("INIT");
$w("#map").onMessage( (event) => {
let receivedData = event.data;
console.log(receivedData);
if (receivedData === "READY") {
makeMap();
} else {
console.log("Clicked markers id: " + receivedData);
}
} );
console.log("PAGE LOADED!");
});
function makeMap(){
var mapLocations = [];
var mapMarker = [];
let item;
wixData.query("Members")
.gt("longitude", 0)
.gt("latitude", 0)
.find()
.then( (results) => {
for (var i = 0; i < results.totalCount; i++)
{
if (typeof results.items[i] !== 'undefined') {
item = results.items[i];
mapMarker = {
"id": item._id,
"title": item.city,
"lat": Number(item.latitude),
"lng": Number(item.longitude),
"description": item.city
};
mapLocations.push(mapMarker);
}
}
$w("#map").postMessage(mapLocations);
} )
.catch( (err) => {
let errorMsg = err;
console.log(errorMsg);
console.log("Error: " + item.title);
} );
}
And then inside the html component I had to take away the async defer in the script loading for google map api and execute the callback callWix() after the script has been loaded.
Weird it stopped but now it works again.
Glad you got it working again, Andreas. I did something similar to “wake up” the html-component, but starting from the component´s side: in the component´s html body onLoad (triggered when DOM is populated, thus ready) i call a function that sends a message (postMessage) to the Wix side, a heart beat. On the Wix side, I wait for that heart beat and then I send the data to the component, where the component listens to with onMessage etc. I have documented it here: https://girizano.wixsite.com/codecorner/home/html-component-not-running-in-publish-mode-google-sheets-example
