Google Map API only loading on reload

Ask the community
,
1

If I go to my map page, via the header menue, my map isn’t loading. I have to reload the page, before I can see the markers, or open the page in a new tab.

When I load the page, I send my marker locations from a database to my html map.

I think the map can’t load, because

window.onmessage = (event) => { if (event.data) { … }}
hasn’t received any data, when the callback is initialising the map.

So I need to wait until I get my locations from my site, before the map is initialising, but how?

All examples in the forum are using this function, but don’t have any problems.

Here’s my pagecode:

$w.onReady(function () {
    $w("#htmlMap").allowFullScreen();
    $w("#htmlMap").onMessage((event) => {

 if (event.data.type === 'ready') {

 let MarkerHotels = [];
 let benutzerMarker = [];

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

 return wixData.query("TeamMarker")
 .limit(1000)
 .distinct("benutzerArray")
 .then((results) => {
                            benutzerMarker = results.items;
 let markers = MarkerHotels.concat(benutzerMarker);
 return $w('#htmlMap').postMessage({ markers });
 });
 });
 }
 });
});

Here’s my html code (I deleted css and some functions like “restore map” to make it more clear):

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Map</title>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
  <script type="text/javascript">
    var bounds;

    function init() {

      let infowindow = new google.maps.InfoWindow({
        pixelOffset: new google.maps.Size(0, -4)
      });
      let infowindowClick = new google.maps.InfoWindow({
        pixelOffset: new google.maps.Size(0, -4)
      });
      bounds = new google.maps.LatLngBounds();

      let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(48.68933623258264, 11.05938929396435),
        streetViewControl: false,
        fullscreenControl: true,
        zoomControl: true,
        mapTypeId: 'terrain',
        mapTypeControl: true,
        mapTypeControlOptions: {
          mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.HYBRID,
            google.maps.MapTypeId.TERRAIN
          ]
        }
      });

      window.onmessage = (event) => {
        if (event.data) {

          var locations = event.data.markers;

          var markers = locations.map(function(location) {

            const markerIcon = {
              hotel: {
                url: "https://static.wixstatic.com/shapes/c6j2dg_a1b272937e974cab930679148cfe5c94.svg",
                origin: new google.maps.Point(0, 0),
                scaledSize: new google.maps.Size(28, 45),
              },
              benutzer: {
                url: "https://static.wixstatic.com/shapes/c6j2dg_8359f5df065919846a0e1dd973c4523fc.svg",
                origin: new google.maps.Point(0, 0),
                scaledSize: new google.maps.Size(28, 45),
              },
            };
            const markerIconSelected = {
              url: "https://static.wixstatic.com/shapes/c6j2dg_c4bfa6b0651b416a8a34034711393068.svg",
              origin: new google.maps.Point(0, 0),
              scaledSize: new google.maps.Size(28, 45)
            };

            let marker = new google.maps.Marker({
              position: location.position,
              map: map,
              icon: markerIcon[location.type],
            });

            bounds.extend(location.position);
            map.fitBounds(bounds);

            if ((location.ladestation.zwei && location.ladestation.drei && location.ladestation.vier) !== "none") {
              var ContentString = '<div id=ContentString>...</div>';
            }

            function isInfoWindowOpen(infoWindowClick) {
              var map = infoWindowClick.getMap();
              return (map !== null && typeof map !== "undefined");
            }

            google.maps.event.addListener(marker, 'mouseover', (function(marker) {
              return function() {
                if (!isInfoWindowOpen(infowindowClick)) {
                  infowindow.setContent(ContentString);
                  infowindow.open(map, marker);
                }
              }
            })(marker));
            google.maps.event.addListener(marker, 'mouseout', (function(marker) {
              return function() {
                infowindow.close();
              }
            })(marker));
            google.maps.event.addListener(map, 'click', (function(marker) {
              return function() {
                marker.setIcon(markerIcon[location.type]);
                infowindow.close();
                infowindowClick.close();
              }
            })(marker));
            google.maps.event.addListener(marker, 'click', (function(marker) {
              return function() {
                for (var i = 0; i < markers.length; i++) {
                  markers[i].setIcon(markerIcon[locations[i].type]);
                }
                marker.setIcon(markerIconSelected);
                infowindow.close();
                infowindowClick.setContent(ContentString);
                infowindowClick.open(map, marker);
              }
            })(marker));
            google.maps.event.addListener(marker, 'dblclick', (function(marker) {
              return function() {
                map.setCenter(marker.getPosition());
                map.setZoom(12);
              }
            })(marker));
            google.maps.event.addListener(infowindowClick, 'closeclick', (function(marker) {
              return function() {
                marker.setIcon(markerIcon[location.type]);
              }
            })(marker));
            return marker;
          });

          var markerCluster = new MarkerClusterer(map, markers, {
            gridSize: 20,
            maxZoom: 3,
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
          });

          var restoreControlDiv = document.createElement('div');
          var restoreControl = new RestoreControl(restoreControlDiv, map);

          restoreControlDiv.index = 1;
          map.controls[google.maps.ControlPosition.TOP_CENTER].push(restoreControlDiv);
        }
      }
    }

    function ready() {
      window.parent.postMessage({
        "type": "ready"
      }, "*");
    }
  </script>
</head>

<body onload="ready()">
  <div id="map" style="height: 100%; width: auto" />

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=init&libraries=&v=weekly" type="text/javascript"></script>
</body>
</html>