Google Maps callback not executing

Discussion Ask a question
1

Hello,
I have a google maps API but the map isn’t loading, if I enter the page with the navigation.
I have to refresh the page once, before the map is loading.

I think the callback doesn’t get executed, when entering the page with the navigation.

I added a postMessage function, when I enter the page with the navigation I get no message. When I refresh the page once I get the message “yes”.

Is this actually a map error, or is this error caused by Wix?

<html>
<head>
  <title>Simple Map</title>
  <style type="text/css">
    #map {
      height: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>

<body>
  <div id="map"></div>
  <script>
    function initMap() {

      window.parent.postMessage({
        "type": "yes"
      }, "*");

      const myLatLng = {
        lat: -25.363,
        lng: 131.044
      };
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: myLatLng,
      });
    }
  </script>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" async></script>
</body>
</html>
1 Like
2

Hi, I’m Talia from the EditorX product team.
Would you mind sharing your site’s URL? This will help us further investigate this issue. We look forward to hearing from you. Thanks for your help!

3

Finallly I found a fix for this problem.
For some reason Wix doesn’t load the html when you switch the site over the navigation menue, so the callback from the map doesn’t get executed (just when you refresh)

How to fix this:

import wixData from 'wix-data';

$w.onReady(function () {

 $w("#htmlMap").allowFullScreen();

 let markers = [];

 return wixData.query("GoogleMaps")
 .find()
 .then((results) => {
 markers = results.items[0].googleMapArray;

//You have to send a message to the HTML, else it won't load
 $w("#htmlMap").postMessage({ markers });
 // ad the part above

 $w("#htmlMap").onMessage((event) => {

 if (event.data.type === 'ready') {
 return $w('#htmlMap').postMessage({ markers });
 }
 });
 });
});

Just send a message to the html, then it will execute the callback, and when the html is loaded (event.data.type === ‘ready’) you can send the data.