Google maps loading infoWindows on Marker click

Question

Having trouble loading infoWindows with Google maps api. The markers and infoWindowContent are json generated. 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'.

It is probably the 'addListener'-thing that I'm doing wrong for 2 days now. 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):

var infoWindowContent = [$infoWindowItems];

Which contains fields like this (with pre-generated 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:

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

Answer 1

I get a javascript error with the posted code Uncaught ReferenceError: infoWindow is not defined. Because infoWindow isn't defined in the posted code.

fixed fiddle

code snippet which defines 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>