window.Map不是Google Maps API v3中的构造函数

时间:2018-11-30 02:47:51

标签: google-maps google-maps-api-3

我有一个带有新密钥的google map

但是在控制台中出现错误

错误:

Uncaught TypeError: window.Map is not a constructor
    at Zr (map.js:2)
    at ds.release (map.js:53)
    at gs (map.js:5)
    at _.rl.Ab (map.js:59)
    at map.js:46

HTML

<head>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=mykey">
</script>
</head>

<body onload="init()">
    <div id="map_canvas"></div>
</body>
<script src="js/index.js"></script>

index.js

Map = null;
function init() {
    var mapOptions = {***};
    Map = new google.maps.Map( document.getElementById( "map_canvas" ), mapOptions );
}

感谢您的时间!

2 个答案:

答案 0 :(得分:5)

地图是EcmaScript中的保留字,因此您不应将其用作变量名:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

问题是这一行(jsfiddle认为Map是只读的):

Map =  null;

将地图变量重命名为其他名称(例如map,用小写的“ m”表示)。

proof of concept fiddle

代码段:

map = null;

function init() {
  var mapOptions = {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 1
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, "load", init);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

答案 1 :(得分:2)

这是本周的每周地图版本的问题。我变了: ... // maps.googleapis.com/maps/api/js?key .... 至 ... // maps.googleapis.com/maps/api/js?v=3.34&key ...

第一个路径服务器默认的每周地图版本。 我选择将其设置为3.34,效果很好。我可以选择一个季度版本,该季度版本通过插入v = quarterly可以自动更新到当前季度的版本(它将自动更新下一个季度)。不管怎样,3.34都解决了我的问题。