Wix Code works in Preview but not on Publish


I have been writing a website which runs fine in Preview mode however the calls to my backend files seem to stop once i publish the website. None of my logs are coming up in Publish but work in Preview mode.

My page has a HTML iFrame as well as page code and my backend modules. Can anyone advise if this is something to do with my code or it is a Wix based issue. Thanks.

Page Code:

import {getLocations} from 'backend/markers';
import {getSites} from 'backend/sites';
import {clearSites} from 'backend/sites';
import {addSites} from 'backend/sites';

$w.onReady(async function () {
 // Get most recent site data from Glide
 var sites = await getSites();

 // Clear all sites from the data collection and refil with new data
 await clearSites();

 // Add current site data into the database
 await addSites(sites);

    $w("#html1").onMessage( (event) => {
 if(event.data === 'READY') {
 else {
            console.log("Could not load map");
    } );
async function sendLocations() {
    getLocations().then((locations) => {
        console.log("locations getLocations then call");
 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}, icon: {url: loc.occupancy}});    

Backend Module:

import {fetch} from 'wix-fetch';
import wixData from 'wix-data';

export function getSites() {
 var sites = fetch("ENDPOINT", {
 "method": "get"}
    .then((httpResponse) => {
 if (httpResponse.ok) {
 return httpResponse.json();
    .catch(err => console.log(err));
 return sites;

export function clearSites() {
    console.log("Clearing sites...");
    .then((result) => {
 for (var i = 0; i < result.items.length; i++){
 if (result.items[i] === null) continue;
            wixData.remove("Sites", result.items[i]._id);
    console.log("Cleared sites");

export function addSites(data) {
    console.log("Adding sites...");
 let sites = [];
 for (var i = 0; i < data.length; i++) {
 let toInsert = {
 'title' : data[i].Name,
 'latitude' : data[i].Latitude,
 'longitude' : data[i].Longitude
 let urlBase = "URLBASE";

 if (data[i].occupency === 0) {
            toInsert.occupancy = urlBase + "pingrey.svg";
 else if (data[i].occupency === 1) {
            toInsert.occupancy = urlBase + "pingreen.svg";
 else if (data[i].occupency === 2) {
            toInsert.occupancy = urlBase + "pinorange.svg";
 else {
            toInsert.occupancy = urlBase + "pinred.svg";

        wixData.insert("Sites", toInsert)
            .then( (results) => {
                sites.push({title: results.title, position: {lat: results.latitude, lng: results.longitude}, icon: {url: results.occupancy}});
            } )
        .catch( (err) => {
        } );
    console.log("Added sites");
    console.log("Inserted values into site table");
 return sites;




<body onload="callWix()">
  <div id="map" style="height: 100%; width: 100%;" />
    function callWix() {
      window.parent.postMessage("READY", "*");
  <script type="text/javascript">
    function RestoreControl(controlDiv, map) {
      controlUI.addEventListener('click', function() {
          lat: 0,
          lng: 0

    let locations = null;

    function init() {
      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: 5,
            streetViewControl: false,
            center: {
              lat: 0,
              lng: 0
            gestureHandling: 'greedy'

          var markers = locations.map(function(location) {
            let marker = new google.maps.Marker({
              position: location.position,
              icon: location.icon,
              map: map
            google.maps.event.addListener(marker, 'mouseover', (function(marker) {
              return function() {
                infowindow.open(map, marker);
            google.maps.event.addListener(marker, 'mouseout', (function(marker) {
              return function() {
            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;
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
  <script src="https://maps.googleapis.com/maps/api/js?key=MY KEY&callback=init">



have you tried embedding the html in an embedded html feature in wix?

Have you simply tried syncing your datasets from sandbox to live as in preview you are working in sandbox, whilst the user on the website will be using the live version.

If it’s only not working on live, then I would check the usual culprits…proper sandbox settings, timing issues, cross-site security issues. The first thing I would try is changing this:

for (let i = 0; i < locations.length; i++) {
 let loc = locations[i];
 markers.push({title: loc.title, position: {lat: loc.latitude, lng: loc.longitude}, icon: {url: loc.occupancy}});    
   if (i === locations.length - 1) $w('#html1').postMessage(markers);
   /*no point in making markers an object without a key...this might cause issues - You can post arrays to iframes and they'll work just fine*/

It’s possible that because you’re loading markers at such a high frequency, some security feature is triggered, and this makes it so they’re loaded only once.

Also, (this might be correct in your actual code already) you’re using occupancy and occupency keys, where they should probably be the same.

Thank you for your help. It was meant to call an API on every page load so i didn’t think to do this. It now works and updates on page load. Thank you.

Hi, thanks for your reply. It seemed to be i wasn’t syncing my datasets accross to the live site. It didn’t occur to me as they are meant to be refreshed each time the page loads.

I will have a look into the code changes you have suggested as well, I appriciate that.