Javascript 如何使用带有谷歌地图API的网页包？_Javascript_Google Maps_Webpack_Html Webpack Plugin

Javascript 如何使用带有谷歌地图API的网页包？

javascript google-maps webpack

Javascript 如何使用带有谷歌地图API的网页包？,javascript,google-maps,webpack,html-webpack-plugin,Javascript,Google Maps,Webpack,Html Webpack Plugin,我正在使用Webpack+HTMLWebpack插件来构建我所有的静态文件。问题是，当我将它与谷歌地图API一起使用时，它不起作用我有以下代码： var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 6 }); // the other code, irr

我正在使用Webpack+HTMLWebpack插件来构建我所有的静态文件。问题是，当我将它与谷歌地图API一起使用时，它不起作用

我有以下代码：

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  // the other code, irrelevant
}

和一个HTML文件：

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="map"></div>
  <script async="async" defer="defer"
      src="https://maps.googleapis.com/maps/api/js?key=<token here>&callback=initMap">
    </script>
   <script src="script.js"></script>
</body>
</html>

输出的HTML是（我已经从源文件中删除了importing

script.js

，因为它是由webpack添加的，并且关闭了最小化，只是为了可读性）：

在script.js中

在函数声明之后，将函数添加到全局范围，如下所示：

function initMap() {
    // Some stuff
}
window.initMap = initMap;

google maps API不会“打包”你应该作为外部源保存的网页包，如果失败，是因为script.js没有打包，或者你没有使用新打包的js。请向我们展示您的网页配置和最终的htmlfile@DanyelDarkcloud更新了这两个问题的困扰，两天……用Zurb基金会运行WebPACK网站，试图徒劳地想出一个主意。这救了我。在将JavaScript代码从一个普通的JS设置移植到一个Web包架构之后，你救了我重写JavaScript代码。谢谢。对于Typescript用户：

<!doctype html>
<html>
<head>
</head>
<body>
  <a href="/login/facebook">Login</a>
  <div id="map"></div>
  <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGSgj5Ts10UdapzUnWlr34NS5cuoBj7Wg&callback=initMap">
    </script>
<script type="text/javascript" src="script.js"></script></body>
</html>

function initMap() {
    // Some stuff
}
window.initMap = initMap;