未捕获类型错误：无法读取未定义的属性（读取“地图”）

Question

我正在尝试在文件 html.twig 上显示来自谷歌地图的地图，但它向我显示了这个错误

未捕获类型错误：无法读取未定义的属性（读取“地图”）

我的树枝：

let map, google;
let markers = [];
var infowindow = new google.maps.InfoWindow();

function initMap() {
  const haightAshbury = {
    lat: 36.77355514795189,
    lng: 9.088027850665279
  };
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: haightAshbury,
    draggable: true

  });
  map.addListener("click", (event) => {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  deleteMarkers();
  const marker = new google.maps.Marker({
    position: location,
    map: map,
  });

<script src="https://maps.googleapis.com/maps/api/js?key={APIKeyHere}&callback=initMap&libraries=&v=weekly" async>
</script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

我该如何解决它，谢谢

Answer 1

您定义了一个名为

google

的变量，但从未为其赋值：

let map,google;

这使得它

undefined

。 然后，您尝试从该

undefined

变量中读取值：

var infowindow = new google.maps.InfoWindow();

由于您要导入的库已经有一个名为

google

的变量，并且您可能不想隐藏该变量，因此请将其从变量定义中删除：

let map;

Answer 2

1. 您不应该将

   google

   声明为变量
2. 您正在使用回调函数加载 API (

   initMap

   )。这意味着一旦 API 完成加载，就会调用

   initMap

   函数，但您在回调函数之外使用

   new google.maps.InfoWindow();

   ，因此会出现错误

您应该将该行移至回调函数内，或者删除它，因为您似乎没有使用 Infowindows（至少在您提供的代码中没有）。