initMap不是函数和Uncaught TypeError：无法读取未定义的属性“InfoWindow”
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了initMap不是函数和Uncaught TypeError：无法读取未定义的属性“InfoWindow”相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>Gooogle Maps</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head >
<body >
<h1>Google Maps</h1>
<div id="map"></div>
<script src="app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8&callback=initMap">
</script>
</body>
</html>
// AIzaSyBeh47W7e_8CXydTeB9YgXb-MnI-REt2GM AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8
// Map options
window.initMap= function(){
var options = {
zoom:8,
center:{lat:41.608635,lng:21.745274999999992}
}
// New Map
var map = new
google.maps.Map(document.getElementById('map'),options);
// Array of markers
var markers = [
{
coords:{lat:41.1231,lng:20.8016},
content:'<h1>Ohrid</h1>'
},
{
coords:{lat:41.03143,lng:21.33474},
content:'<h1>Bitola</h1>'
},
{
coords:{lat:41.9973,lng:21.4280},
content:'<h1>Skopje</h1>'
}
]
// loop
for(var i = 0; i<markers.length;i++){
addMarker(markers[i]);
}
// add marker function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map
});
if(props.content){
var infoWindow = new google.map.InfoWindow({
content:props.content
});
marker.addListener('click', function() {
infoWindow.open(map,marker);
});
}
}
}
我试图将谷歌地图的html脚本更改为最后一个，异步并在脚本文件中最后推迟。我在一篇文章中建议使用window.initMap = function（），但仍然有错误。我在一篇文章中读到你需要放置适当的命名空间。这是给我的例子：所以我真的不知道要包含哪些有效命名空间。请帮忙
答案
嗨帝国，
你错过了新的google.mapS.InfoWindow
// Map options
function initMap(){
var options = {
zoom: 8,
center: {
lat: 41.608635,
lng: 21.745274999999992
}
}
// New Map
var map = new
google.maps.Map(document.getElementById('map'), options);
// Array of markers
var markers = [{
coords: {
lat: 41.1231,
lng: 20.8016
},
content: '<h1>Ohrid</h1>'
},
{
coords: {
lat: 41.03143,
lng: 21.33474
},
content: '<h1>Bitola</h1>'
},
{
coords: {
lat: 41.9973,
lng: 21.4280
},
content: '<h1>Skopje</h1>'
}
]
// loop
for (var i = 0; i < markers.length; i++) {
addMarker(markers[i]);
}
// add marker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map
});
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
}
}
initMap();#map{
height: 500px;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8"></script>
<h1>Google Maps</h1>
<div id="map"></div>另一答案
// Map options
function initMap(){
var options = {
zoom: 8,
center: {
lat: 41.608635,
lng: 21.745274999999992
}
}
// New Map
var map = new
google.maps.Map(document.getElementById('map'), options);
// Array of markers
var markers = [{
coords: {
lat: 41.1231,
lng: 20.8016
},
content: '<h1>Ohrid</h1>'
},
{
coords: {
lat: 41.03143,
lng: 21.33474
},
content: '<h1>Bitola</h1>'
},
{
coords: {
lat: 41.9973,
lng: 21.4280
},
content: '<h1>Skopje</h1>'
}
]
// loop
for (var i = 0; i < markers.length; i++) {
addMarker(markers[i]);
}
// add marker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map
});
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
}
}
initMap();#map{
height: 500px;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQz-dulnebn0pqnUxRai6D4L6I5smV-h8"></script>
<h1>Google Maps</h1>
<div id="map"></div>以上是关于initMap不是函数和Uncaught TypeError：无法读取未定义的属性“InfoWindow”的主要内容，如果未能解决你的问题，请参考以下文章
当我尝试将多个点击侦听器添加到标记 django 时，initMap 不是一个函数
尝试使用通过EJS传递给客户端的数据绘制多个Google Map标记/信息窗口时，initMap（）不是一个函数