Javascript GoogleMaps 不会在页面加载时加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34466718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GoogleMaps does not load on page load
提问by sesc360
I can't get my map running using the GoogleMaps API V3. The map does not load. I would expect the map to appear in the div with the id gisMapbut in the Chrome Debugger I get the message:
我无法使用 GoogleMaps API V3 运行我的地图。地图不加载。我希望地图出现在带有 id 的 div 中，gisMap但在 Chrome 调试器中我收到消息：
Uncaught InvalidValueError: initMap is not a function
Javascript
Javascript
var map;
function initMap() {
// Enabling new cartography and themes
google.maps.visualRefresh = true;
// Setting starting options
var mapOptions = {
center: new google.maps.LatLng(39.9078, 32.8252),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Getting Map DOM Element
var mapElement = document.getElementById('gisMap');
// Creating a map with DOM element
map = new google.maps.Map(mapElement, mapOptions);
}
Bundle.js (excerpt)
Bundle.js（摘录）
(...)
module.exports = Vue;
}).call(this,require('_process'))
},{"_process":1}],3:[function(require,module,exports){
'use strict';
var map;
function initMap() {
// Enabling new cartography and themes
google.maps.visualRefresh = true;
// Setting starting options
var mapOptions = {
center: new google.maps.LatLng(39.9078, 32.8252),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Getting Map DOM Element
var mapElement = document.getElementById('gisMap');
// Creating a map with DOM element
map = new google.maps.Map(mapElement, mapOptions);
}
},{}],4:[function(require,module,exports){
'use strict';
var Vue = require('vue');
new Vue({});
(...)
HTML
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MFServer Test</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MFDispo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Start</a></li>
<li><a href="#about">GIS</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<body id="app">
<div class="pageWrapper">
<div id="gisMap"></div>
<div id="content"></div>
</div>
<script src="/js/bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=initMap" async defer></script>
</body>
</html>
SCSS
社会保障局
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "partials/forms";
html, body {
height: 100%;
padding-top: 25px;
}
.pageWrapper {
background-color: red;
height:100%;
width: 100%;
}
#gisMap {
height: 100%;
width: 50%;
background-color: green;
}
回答by Marcin Zablocki
Make sure that initMapfunction is visible from the global scopeor the parameter passed as callback to google maps.js is properly namespaced. In your case, the quickest solution will be replacing:
确保initMap函数在全局范围内可见，或者作为回调传递给 google maps.js 的参数是正确的命名空间。在您的情况下，最快的解决方案是更换：
function initMap(){
//..
}
to:
到：
window.initMap = function(){
//...
}
or namespace version:
或命名空间版本：
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap" async defer></script>
//Edit:
//编辑：
I see that in your code snippet you use some async module loading (require.js?) and the code in which you create window.initMap function does not get executed unless you call the module that contains this declaration. So you have not fulfilled the first condition that I've mentioned - the initMap must be visible from the global scope before you call google maps.js.
我看到在你的代码片段中你使用了一些异步模块加载（require.js？），除非你调用包含这个声明的模块，否则你创建 window.initMap 函数的代码不会被执行。所以你没有满足我提到的第一个条件 - 在你调用 google maps.js 之前，initMap 必须在全局范围内可见。
回答by Ronnie Royston
Simply make sure that the script element with the initMap function in it comes before the google maps api script element in your HTML. Also, the async defer attributes included in Google's examples may be causing the problem. Simply remove those attributes.
只需确保其中包含 initMap 函数的脚本元素位于 HTML 中的 google maps api 脚本元素之前。此外，Google 示例中包含的 async defer 属性可能会导致问题。只需删除这些属性。
<script src='/js/script.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap"></script>
回答by Damir Olejar
try:
尝试：
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=YOUR_API_KEY&signed_in=true">
initMap()
</script>
<div id="map_canvas" style=""></div>
<body id="loadMap" onload="initializeMap(-79, 43,'')"></body>
回答by Wim Rotor
I had the same issue. Solved it by moving:
我遇到过同样的问题。通过移动解决它：
<script src="//maps.googleapis.com/maps/api/js?key=-yourkey-=initMap" async defer></script>
after:
后：
// Google Map
function initMap() {
GoogleMap.initGoogleMap();
}
Hope it will be of any assistance for someone...
希望它对某人有任何帮助......
回答by Showcase Imagery
I have the answer :)
我有答案:)
After a little faffing around. I've determined that the js file with your Google Maps function in should notbe async
一番折腾之后。我已经确定包含您的 Google 地图功能的 js 文件不应该是异步的
So in my case
所以就我而言
<script async type="text/javascript" src="js/home.js"></script>
became
变成了
<script type="text/javascript" src="js/home.js"></script>
This does not mean that the Google Maps API call can't have asyncand/or deferattributes included!
这并不意味着 Google Maps API 调用不能包含async和/或defer属性！
Ie, my call looks like this, and comes before the local home.jsfile
即，我的调用看起来像这样，并且在本地home.js文件之前
<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initMap" async defer></script>
回答by Adi
Add async deferin the end of google maps api like this
async defer像这样在google maps api的末尾添加
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR API KEY HERE&callback=initMap" async defer></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR API KEY HERE&callback=initMap" async defer></script>
I hope it will work fine.
我希望它能正常工作。
