initMap不是一个函数 - 映射不是渲染。 Google Maps API - JS [英] initMap is not a function - map not rendering. Google Maps API - JS
问题描述
我遇到了众所周知的问题 initMap不是一个函数，我真的不知道如何解决它。我尝试了其他问题中推荐的各种方法，但没有一个可以工作。我发现的唯一合理的解决方案是涉及 AngularJS 的使用，但我试图在没有它的情况下完成脚本。
以下是我的html代码：
< html>
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js>< / script>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymous>< /脚本>
< script src =script.js/>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous>
< link rel =stylesheethref =style.css>
< / head>
< body>
< div id =map-canvas> < / DIV>
< / body>
< / html>
JS代码：
window.initMap = function（）{
var uluru = {lat：-25.363，lng：131.044};
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
zoom：4，
center：uluru
}）;
var marker = new google.maps.Marker（{
position：uluru，
map：map
}）;
};
对于JS代码，我从字面上复制并粘贴了Google文档中的内容， code> window.initMap = function（）。
尝试：
$ b
- 更改
函数initMap（）到窗口.initMap = function（） - 删除
initMap（）中的所有内容并给它alert（ok）查看
，如果它出现。
- 将
async defer的位置更改为脚本引用的结尾，并将脚本引用
- 将
我详细检查过的问题：
我的地图未呈现，我一直收到此错误，任何想法如何解决它？
- 添加缺少的
< / script>标记 - 更改页面加载顺序：
< div id =map-canvas> < / DIV>
< script src =script.js推迟异步>< / script>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap>< / script>
I am experiencing the well known issue initMap is not a function and I really don't see how to solve it. I've tried various methods recommended in other questions but none of them work. The only plausible solution I found was involving the usage of AngularJS but I am trying to accomplish script without it.
Here is my html code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src ="script.js" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href ="style.css">
</head>
<body>
<div id ="map-canvas"> </div>
</body>
</html>
JS Code:
window.initMap = function() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
};
For the JS code, I literally copied and pasted what's in Google's documentation with a small change made here window.initMap = function().
Things I've tried:
- Changing
function initMap()towindow.initMap = function() - Delete everything in
initMap()and giving italert("ok")to see if it will come up. Well, it didn't. - Changed the position of
async deferto the end of the script reference, also put the script reference at the very top.
Questions I've checked in detail:
First try, Second, Third time wasn't the charm
The error message I get :
My map is not being rendered and I keep getting this error, any ideas how to fix it?
Two issues:
- Add the missing
</script>tag - Change the order of the page load:
<div id="map-canvas"> </div>
<script src="script.js" defer async></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
这篇关于initMap不是一个函数 - 映射不是渲染。 Google Maps API - JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
