谷歌地图加载信息窗口点击标记

Question

使用谷歌地图api加载infoWindows时遇到问题。标记和infoWindowContent是json生成的。所有这些看起来都很酷，标记加载在地图中，即使有特殊标记(见下文)。

只有infoWindows不会从"var infoWindowContent"加载/打开。

这可能是"addListener"——我已经做错两天了。感谢您的帮助！

以下是所有代码：

function initMap() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat:".$c_geo_latitude.", lng: ".$c_geo_longitude."}
});
setMarkers(map);
}

然后我们有(php中的所有内容)：

var infoWindowContent = [$infoWindowItems];

它包含这样的字段(带有预先生成的HTML)：

var infoWindowContent = [
['<div class="InfoAll">'+
'<h1>Hi you,</h1><div id="bodyContent">'+
'<br />This marker is placed in the area where you are right now.</div></div>'],
['<div class="InfoAll">'+
....etc";

//这里是标记，加上代码的其余部分。

var markers = [
['Place 1',52.066700,5.100000,1413,'hotel'],
['Place 2',52.095411,5.130759,1414,'parking'],
['Place 3',52.238407,5.470300,1415,'hotel'],
['Place 4',52.373610,4.885844,1416,'7Eleven']];
function setMarkers(map) {
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
if(marker[4] == "hotel") { showIcon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png"; setIndex = 1; }
if(marker[4] == "parking") {  showIcon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"; setIndex = 1; }
if(marker[4] == "7Eleven") {  showIcon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png"; setIndex = 99; }
var marker = new google.maps.Marker({
position: {lat: marker[1], lng: marker[2]},
map: map,
icon: showIcon,
shape: shape,
title: marker[0],
zIndex: marker[3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
var currMarker = markers[i][3]; 
$(document).data({ currMarker: currMarker }); 
}
})(marker, i));
}
}

ps。我们需要保留这个，因为我们也将数据加载到infoWindow中：

$(document).data({ currMarker: currMarker });

Answer 1

发布的代码Uncaught ReferenceError: infoWindow is not defined.出现javascript错误，因为发布的代码中没有定义infoWindow。

固定小提琴

定义infoWindow:的代码段

var infoWindowContent = [
['<div class="InfoAll">' +
'<h1>#1 Hi you,</h1><div id="bodyContent">' +
'<br />This marker is placed in the area where you are right now.</div></div>'
],
['<div class="InfoAll">' +
'<h1>#2 Hi you,</h1><div id="bodyContent">' +
'<br />This marker is placed in the area where you are right now.</div></div>'
],
];
var markers = [
['Place 1', 52.066700, 5.100000, 1413, 'hotel'],
['Place 2', 52.095411, 5.130759, 1414, 'parking'],
/* ['Place 3',52.238407,5.470300,1415,'hotel'],
['Place 4',52.373610,4.885844,1416,'7Eleven'] */
];

html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<script defer>
var infoWindow;
function initMap() {
infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {
lat: 42,
lng: -72
}
});
setMarkers(map);
}
function setMarkers(map) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
if (marker[4] == "hotel") {
showIcon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
setIndex = 1;
}
if (marker[4] == "parking") {
showIcon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
setIndex = 1;
}
if (marker[4] == "7Eleven") {
showIcon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
setIndex = 99;
}
var marker = new google.maps.Marker({
position: {
lat: marker[1],
lng: marker[2]
},
map: map,
icon: showIcon,
title: marker[0],
zIndex: marker[3]
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
var currMarker = markers[i][3];
$(document).data({
currMarker: currMarker
});
}
})(marker, i));
}
map.fitBounds(bounds);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>