Astrojs - 嵌入谷歌地图

Question

我想将谷歌地图嵌入到我的 astro 应用程序中。

我发现这个网站提供了教程并按照说明进行操作。

但是我遇到了错误：

GET https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true net::ERR_BLOCKED_BY_CLIENT

Uncaught (in promise) InvalidValueError: initMap is not a function

我不知道如何调试这个。

下面是我在 astro 中的代码：

<Layout>
<div id="map"></div>
</Layout>
<script>
  function initMap() {
    // Set the coordinates for the center of the map
    var center = { lat: 37.7749, lng: -122.4194 };

    // Create a new Google Maps object
    var map = new google.maps.Map(document.getElementById("map"), {
      center: center,
      zoom: 13,
    });

    // Add a marker to the map
    var marker = new google.maps.Marker({
      position: center,
      map: map,
    });
  }
</script>
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDk0w5DoyG684rkQ3pU1zXJTboceFPM2LY&callback=initMap"
></script>

<style>
  /* Set the height of the map container */
  #map {
    height: 400px;
  }
</style>

which

layout

标签只是一些页眉和页脚的内容。我该如何解决这个问题？

Answer 1

只需从脚本标记中删除异步，它就应该可以工作