获取"Uncaught ReferenceError: google is not defined"
Getting "Uncaught ReferenceError: google is not defined" error using Google Maps API
我试图自定义地图上的标记,但我一直得到'谷歌没有定义'。我试过不同的方法,但还是不管用。在初始化映射之前,我使用了API密钥并包含了maps脚本。这是我的html:
<html class="no-js" lang="en-US" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home – Algebra</title>
<link rel='dns-prefetch' href='//ajax.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'></script>
<link rel='https://api.w.org/' href='http://localhost/algebra/wp-json/' />
<link rel="alternate" type="application/json+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F&format=xml" />
</head>
<body class="page page-id-4 page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php logged-in offcanvas">
<header id="masthead" class="site-header" role="banner">
<div class="top-strip"></div>
<div class="top-nav"></div>
</header>
<section class="container">
<section class="map">
<div id="map-container"></div>
<div class="contact-container">
<div class="contact">
<img src="" alt="mail-icon">
<span>You can contact us at info@algebraventures.com</span>
</div>
</div>
</section>
</section>
<div id="footer-container">
<footer id="footer">
</footer>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKX-BAa2bSAiC89C38o8ir29Q7iOWdQ94&callback=initMap"
type="text/javascript"></script>
<script type='text/javascript''>
var myCenter = new google.maps.LatLng(29.714954,32.368546);
function initMap() {
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map-container"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
title: "AZHA"
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"AZHA"
});
infowindow.open(map,marker);
}
// google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script type='text/javascript' src='http://localhost/algebra/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>
</body>
</html>
我很感激你的帮助。
如果你是异步加载API(与async
, defer
, &callback=initMap
),你需要把所有代码依赖于回调函数内的API(或至少在某个地方,它不会执行,直到API加载)。现在您的myCenter
变量是在回调函数之外定义的。
改变:
<script type='text/javascript''>
var myCenter = new google.maps.LatLng(29.714954,32.368546);
function initMap() {
:
<script type='text/javascript''>
function initMap() {
var myCenter = new google.maps.LatLng(29.714954,32.368546);
概念验证
代码片段:
html,
body,
#map-container,
.map,
.container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<header id="masthead" class="site-header" role="banner">
<div class="top-strip"></div>
<div class="top-nav"></div>
</header>
<section class="container">
<section class="map">
<div id="map-container"></div>
<div class="contact-container">
<div class="contact">
<img src="" alt="mail-icon">
<span>You can contact us at info@algebraventures.com</span>
</div>
</div>
</section>
</section>
<div id="footer-container">
<footer id="footer">
</footer>
</div>
<script type='text/javascript'>
function initMap() {
var myCenter = new google.maps.LatLng(29.714954, 32.368546);
var mapProp = {
center: myCenter,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-container"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title: "AZHA"
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "AZHA"
});
infowindow.open(map, marker);
}
// google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>
相关文章:
- 铬:“;未捕获的语法错误:意外的标记:"
- Is onfling available for html, html5
- jQuery is not loaded
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- reactRedux is not defined
- 使用“+="操作人员
- //而不是在src=“”上使用http://"属性
- "未捕获的语法错误:意外的标记}"
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- "实例范围”;TypeScript类的getter/setter
- Javascript复选框函数:;缺少:在属性id之后"
- "“;变量未引用正确的对象
- ReferenceError: cordova is not defined @ng-cordova.min.js:7
- "日期“;AJAX请求返回的类型值未定义
- Jquery - table.row(tr) is undefined
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- JavaScript/jQuery - "$ is not defined- $function()"