I’m new here, so I apologize if this topic has been covered already. But I can’t seem to get my Google Maps embed code to work. I needed something that could display a map based off of an address, rather than latitude and longitude. What I’ve found so far suggested embedding the map in a HTML element, and passing the address information through the HTML element’s postMessage() function.
My code to pass the data along to the page is this:
import wixData from ‘wix-data’;
$w.onReady(function(){
var obj = $w(“#dynamicDataset”).getCurrentItem();
var addr = obj.title.replace(/\s/g,‘+’);
var city = obj[“city”];
var prov = obj[“province”];
addr = addr + “,” + city + “+” + prov;
console.log(addr);
$w("#html1").postMessage(addr);
});
and my HTML embed code is this:
Now, this all works if I hit preview when I’m editing that page. But as soon as I navigate away from and then back to the page, the map doesn’t display.
You are running into the well know timing problem with the html-component. What happens is this: your wix code sends the postmessage, but the html-component has not finished loading yet (it´s a separate process that does not fall under the page onLoad). This will not happen in Preview Mode, because the difference between editing and preview mode is just a CSS-class, taking some controls away on the screen. This means in Preview Mode, the component is already loaded, so you don´t have the problem.
But in Publish Mode, the control has to be loaded anew, and there it goes wrong.
What you have to do is wait for the control to fully load (in the html body onLoad (function), let it send a message to your Wxi code that it is loaded (“Hello world”), and on the Wix side with the onMessage wait for this message and THEN send the Google stuff to the html-component.
Hi,
I recommend checking out this thread. Moreover, I recommend checking whether the data is synced to the live site and that the collection permissions are set properly.