谷歌地圖加載 infoWindows on Marker click

Question

使用 Google 地圖 API 加載 infoWindows 時遇到問題。 標記和 infoWindowContent 是 json 生成的。 一切看起來都很酷，標記加載到地圖中，即使使用特殊標記（見下文）。

只有 infoWindows 不會從“var infoWindowContent”加載/打開。

這可能是我現在做錯了 2 天的“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));
    }
}

附： 我們需要保留這個，因為我們也在將數據加載到 infoWindow 中：

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

Answer 1

我收到一個 javascript 錯誤，發布的代碼為Uncaught ReferenceError: infoWindow is not defined. 因為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>