谷歌地图仅在页面刷新后加载答案

【问题标题】：Google Maps loading only after page refresh谷歌地图仅在页面刷新后加载
【发布时间】：2021-05-03 12:15:39
【问题描述】：

由于某种原因，我的谷歌地图只在我刷新页面后加载。我已经尝试了一些修复，但它们对我不起作用。

我已经添加了

    $(document).ready(function() {
      initMap();
});

    $(document).bind("projectLoadComplete", initMap);

我的代码，但它不能解决问题。

有些人还使用google.maps.event.addDomListener(window, 'load', initialize); 而不是$(document).ready(function() {initMap();});，但随后我收到错误消息：“Google 未定义”。

这是没有 css 的完整 HTML 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marker</title>
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    function initMap() {

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

          const map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(48.68933623258264, 11.05938929396435),
            zoom: 5,
            streetViewControl: false,
            fullscreenControl: true,
            zoomControl: true,
          });
          const input = document.getElementById("pac-input");
          const autocomplete = new google.maps.places.Autocomplete(input);
          autocomplete.setComponentRestrictions({
            country: ["de", "ch", "at", "it", "lie"]
          });
          autocomplete.bindTo("bounds", map);

          var markerIcon = {
            url: "https://static.wixstatic.com/media/c4g8dl_c2fd4dfd9ce72ede7acb9e44~mv2.png",
            size: new google.maps.Size(22, 35),
            origin: new google.maps.Point(0, 0),
            scaledSize: new google.maps.Size(22, 35)
          };

          autocomplete.setFields(["place_id", "formatted_address", "geometry", "name"]);
          const infowindow = new google.maps.InfoWindow();
          const infowindowContent = document.getElementById("infowindow-content");
          infowindow.setContent(infowindowContent);

          const marker = new google.maps.Marker({
            map: map,
            icon: markerIcon
          });
          marker.addListener("click", () => {
            infowindow.open(map, marker);
          });
          autocomplete.addListener("place_changed", () => {
            infowindow.close();
            const place = autocomplete.getPlace();

            if (!place.geometry || !place.geometry.location) {
              return;
            }

            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);
            }

            marker.setPlace({
              placeId: place.place_id,
              location: place.geometry.location,
            });
            marker.setVisible(true);
            infowindowContent.children.namedItem("place-name").textContent = place.name;
            infowindowContent.children.namedItem("place-address").textContent = place.formatted_address;
            infowindow.open(map, marker);

            window.parent.postMessage([place.name, place.formatted_address, place.geometry.location.lat(), place.geometry.location.lng()], "*");
          });
        }
      }
    }

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

    $(document).ready(function() {
      initMap();
    });
    $(document).bind("projectLoadComplete", initMap);
  </script>
</head>

<body onload="ready()">

  <div id="input">
    <input id="pac-input" class="controls" type="text" placeholder="adress">
  </div>

  <div id="map"></div>

  <div id="infowindow-content">
    <span id="place-name" class="title"></span><br />
    <span id="place-address"></span><br />
  </div>

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

</html>

编辑：如果我在新选项卡中打开带有地图的页面，则地图正在加载。如果我在同一个选项卡中打开页面，就会发生错误。也许我的网站没有触发我 iFrame 的完整代码。

【问题讨论】：

不需要任何 onload/ready 监听器。您已经在脚本 src 中有 callback=initMap。您应该阅读文档的 first page 吗？
您为什么使用onmessage 事件处理程序？这是在wix.com 网站上吗？（如果是这样，那将是包含在问题中的有用信息）。您在最新编辑中提到了<iframe>。什么<iframe>？我在发布的 HTML 中没有看到。

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

我解决了这个问题。问题是window.onmessage = (event) => {。我认为地图无法加载，因为回调在地图接收到 onmessage 事件之前运行。

我使用了我创建的另一张地图中的代码，所以我只是删除了 onmessage 部分，因为我只需要将一些数据发送到我的网站而不是从我的网站发送到我的 html。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marker</title>
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script type="text/javascript">
    function initMap() {

      const map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(48.68933623258264, 11.05938929396435),
        zoom: 5,
        streetViewControl: false,
        fullscreenControl: true,
        zoomControl: true,
      });

      const input = document.getElementById("pac-input");
      const autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.setComponentRestrictions({
        country: ["de", "ch", "at", "it", "lie"]
      });
      autocomplete.bindTo("bounds", map);

      var markerIcon = {
        url: "https://static.wixstatic.com/media/e6dc2fd4dfd9ce72ede7acb9e44~mv2.png",
        size: new google.maps.Size(22, 35),
        origin: new google.maps.Point(0, 0),
        scaledSize: new google.maps.Size(22, 35)
      };

      autocomplete.setFields(["place_id", "formatted_address", "geometry", "name"]);
      const infowindow = new google.maps.InfoWindow();
      const infowindowContent = document.getElementById("infowindow-content");
      infowindow.setContent(infowindowContent);

      const marker = new google.maps.Marker({
        map: map,
        icon: markerIcon
      });
      marker.addListener("click", () => {
        infowindow.open(map, marker);
      });
      autocomplete.addListener("place_changed", () => {
        infowindow.close();
        const place = autocomplete.getPlace();

        if (!place.geometry || !place.geometry.location) {
          return;
        }

        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17);
        }

        marker.setPlace({
          placeId: place.place_id,
          location: place.geometry.location,
        });
        marker.setVisible(true);
        infowindowContent.children.namedItem("place-name").textContent = place.name;
        infowindowContent.children.namedItem("place-address").textContent = place.formatted_address;
        infowindow.open(map, marker);

        window.parent.postMessage([place.name, place.formatted_address, place.geometry.location.lat(), place.geometry.location.lng()], "*");
      });
    }
  </script>
</head>

<body onload="initMap()">

  <div id="input">
    <input id="pac-input" class="controls" type="text" placeholder="add adress">
  </div>

  <div id="map"></div>

  <div id="infowindow-content">
    <span id="place-name" class="title"></span><br />
    <span id="place-address"></span><br />
  </div>

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

</html>

【讨论】：