initMap不是Google Maps JavaScript的函数 [英] initMap is not a function Google Maps Javascript
问题描述
我只是试图在js小提琴中加载googlemaps API。我无法通过错误：initMap不是一个函数。
我的jsfiddle在这里： jsfiddle
我的代码：
函数initMap（）{
var map = new google.maps.Map （document.getElementById（'map'），{
center：{lat：34.397，lng：150.644}，
scrollwheel：false，
zoom：2
}）;
HTML：
< div id =mapstyle =width：500px; height：400px;>< / div>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap>
< / script>
当我有函数initmap（）{}（括号）时，地图不会加载，而我得到错误。
当删除函数initmap {} 时，只需：
var map = new google.maps.Map（document.getElementById（'map'），{
center：{lat：34.397，lng：150.644}，
scrollwheel：false，
zoom ：2
}）;
加载地图，但我仍然收到错误：
initMap不是函数
它可能与回调有关。我有一段时间没有写javascript。但我只需要通过这个错误。谢谢
TL; DR
在小提琴中，在 iniMap（）中不包含} 的语法错误。此外，该功能是在DOM加载后定义的。为了解决这个问题：
- 设置载入类型以包装
< body>或< head> - 修正语法错误
b
以下是处理这些问题的方法。
$ b全局范围
在全局中放置
initMap范围。不要将函数定义封装在私有或匿名作用域中，比如
（function（）{
函数initMap（）{
//
}
}）（）;
DOM onload
定义函数如果可能的话，
< head>。或者至少在< body>中加载API之前。在dom完全加载之后，从不定义initMap，例如window.onload和document.addEventListener 'ondomready'，callback）
$ b C $ C><脚本>
函数initMap（）{
//
}
< / script>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
不良做法：
window.onload< script>
window.onload = function（）{
函数initMap（）{
//
}
}
< / script>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
和
<脚本>
document.addEventListener（'ondomready'，function（）{
函数initMap（）{
//
}
}）;
< / script>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
或
$（function（）{}）如果您使用jQuery< script>
$（function（）{
函数initMap（）{
//
}
}）;
< / script>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
I know this question has been asked. But I still can't get past it. I am simply trying to get googlemaps API loaded in js fiddle. I cannot get past the error:initMap is not a function. My jsfiddle here: jsfiddle
My code:
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 34.397, lng: 150.644 }, scrollwheel: false, zoom: 2 });HTML:
<div id="map" style="width: 500px; height: 400px;"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap"> </script>When I have the function initmap(){} (with brackets) the map does not load and I get the error. When remove the
function initmap{}and just:var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 34.397, lng: 150.644 }, scrollwheel: false, zoom: 2 });The map loads, however I still get the error:
initMap is not a function
It might have something to do with a callback. I have not written javascript in a while. But I just need to get past this error. Thanks
解决方案TL;DR
In the fiddle, you have a syntax error in not closing the
iniMap()with}. Besides, the function is defined after the DOM loads. To fix this:- set load type to wrap in
<body>or<head> - fix syntax error
Here's how to deal with these.
Global scope
Place
initMapin the global scope. do not wrap the function definition within a private or anonymous scope like(function(){ function initMap(){ // } })();DOM onload
Define the function in the
<head>if possible. or at least before loading the API in<body>. And never defineinitMapafter the dom completely loads likewindow.onloadanddocument.addEventListener('ondomready', callback)Good practice
<script> function initMap(){ // } </script> <script src="https://maps.googleapis.com/maps/api/js"></script>Bad practices:
window.onload<script> window.onload = function(){ function initMap(){ // } } </script> <script src="https://maps.googleapis.com/maps/api/js"></script>And
<script> document.addEventListener('ondomready', function(){ function initMap(){ // } }); </script> <script src="https://maps.googleapis.com/maps/api/js"></script>Or
$(function(){ })if you are using jQuery<script> $(function(){ function initMap(){ // } }); </script> <script src="https://maps.googleapis.com/maps/api/js"></script>这篇关于initMap不是Google Maps JavaScript的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- set load type to wrap in
