[英]Google maps loading infoWindows on Marker click
Having trouble loading infoWindows with Google maps api.使用 Google 地图 API 加载 infoWindows 时遇到问题。 The markers and infoWindowContent are json generated.
标记和 infoWindowContent 是 json 生成的。 All looks cool, the markers load in the map, even with special markers (see below).
一切看起来都很酷,标记加载到地图中,即使使用特殊标记(见下文)。
Only the infoWindows are not loaded/opened from the 'var infoWindowContent'.只有 infoWindows 不会从“var infoWindowContent”加载/打开。
It is probably the 'addListener'-thing that I'm doing wrong for 2 days now.这可能是我现在做错了 2 天的“addListener”。 Any help is appreciated!
任何帮助表示赞赏!
Here's all the code:这是所有的代码:
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);
}
Then we have (everything in php):然后我们有(php中的所有内容):
var infoWindowContent = [$infoWindowItems];
Which contains fields like this (with pre-generated HTML):其中包含这样的字段(使用预先生成的 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";
//Here the markers, plus the rest of the code. //这里是标记,加上其余的代码。
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.附: we need to keep this one, because we're loading data into the infoWindow as well:
我们需要保留这个,因为我们也在将数据加载到 infoWindow 中:
$(document).data({ currMarker: currMarker });
I get a javascript error with the posted code Uncaught ReferenceError: infoWindow is not defined.
我收到一个 javascript 错误,发布的代码为
Uncaught ReferenceError: infoWindow is not defined.
Because infoWindow
isn't defined in the posted code.因为
infoWindow
未在发布的代码中定义。
code snippet which defines 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.