Google mapsマーカに情報ウィンドウをロードするをクリックしてください

Question

GoogleマップのAPIを使用して情報ウィンドウを読み込む際に問題があります。 マーカーと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 = [ 
    ['<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"; 

：（事前に生成されたHTMLで）このようなフィールドが含まれてい

var infoWindowContent = [$infoWindowItems]; 

//ここにマーカーと残りのコードを加えます。

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。

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

Answer 1

をinfoWindowが投稿コードで定義されていないので、私は投稿のコードUncaught ReferenceError: infoWindow is not defined.でJavaScriptのエラーが表示されます。我々は、同様に情報ウィンドウにデータをロードしているので、我々は、これを維持する必要があります。

fixed fiddle

infoWindowを定義するコードスニペット：情報ウィンドウがdefined`されていません。

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>