javascript - 通过附加按钮在新窗口中加载 Google map

Question

我正在尝试将一个按钮附加到页面，单击该按钮将在新页面中显示我的谷歌地图。我有一个按钮，单击该按钮会出现错误或出现空白页。

我的代码:

$('.content--body__wrapper').append('<button id="show-map" />')
$('.content--body__wrapper').append(`<script>
document.getElementById("show-map").addEventListener("click", function(){
  var center = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: center
});
  var marker = new google.maps.Marker({
  position: center,
  map: map,
});
})
</script>`);
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&libraries=drawing" asyncdefer></script>`);

错误代码:

编辑:我从脚本源中取出了回调，但我仍然没有加载页面，但错误确实少了很多。

Answer 1

$('.content--body__wrapper').append('<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&libraries=drawing&callback=initMap" async defer></script>'); 

在这一行中，您说:加载 API 时运行名为 InitMap 的函数。问题是这个函数没有在你的 js 中定义。

因此移除此回调以使用 documentReady 事件或移除 documentReadyListener 并创建函数名 initMap