Google Maps API infowindow not recieving the value

Question

I have my webpage where in the map i have some markers loaded from a DB, these ones load correctly and i have an addListener('click') for each of these markers that opens a little window with infowindow.open(), the thing is that i want this window to load with the correct information from the element of the DB that corresponds to the marker i clicked, i've tried to pass the value in diferent ways and using diferent variables, but the only thing i get is undefined or the last element of the DB, and what i want is the information of the selected marker.

Code here:

<script>
var markers = @json($info);
var lat = [];
var lng = [];
var titol = [];
var adreca = [];
for(var i = 0; i < markers.length; i++){
    lat[i] = markers[i].lat;
    lng[i] = markers[i].lng;
    titol[i] = markers[i].nom_rocodrom;
    adreca[i] = markers[i].adreca;
}
function initMap() {
    var centre = {lat: 41.731047, lng: 1.783573};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: centre
    }); 
    for(var i = 0; i < markers.length; i++){  
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat[i],lng[i]),
            map: map,
            animation: google.maps.Animation.DROP,
            id: i
        });            
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() { 
                infowindow.open(map, marker);  
            }
       })(marker, i)); 
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h3 id="firstHeading" class="firstHeading">'+titol[marker.id]+'</h3>'+    
                '<img src="">'+
                '<div id="bodyContent">'+
                '<p>'+adreca[marker.id]+'</p>'+
                '<button type="button" class="btn btn-primary">'+'<a class ="boto_roco" href="/rocodroms/{{ $rocodrom->id }}">Informacio</a>'+'</button>'+
                '</div>'+
                '</div>',
            maxWidth: 200
        });
    }   
}

The strange thing is that if i console.log(marker.id) inside here:

return function() { 
            infowindow.open(map, marker);  
        }

the id value that i get is the correct one but if i then use marker.id inside the content part i get undefined.

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Jan 31 '18 at 22:00
I didn't find the answer i needed before in stackoverflow, and i don't think it's in that post, what i need to do is get the values in the content part, when i display de window i don't know why but it does not display the info of the marker i selected even though i pass it through the function, i either get undefined or the last value of my DB. — Pol Vilarrasa, Jan 31 '18 at 22:05

score 0 · Accepted Answer · answered Jan 31 '18 at 22:11

You need function closure on the InfoWindow content (as is done in the similar/duplicate question: Google Maps JS API v3 - Simple Multiple Marker Example)

proof of concept fiddle

code snippet:

var markers = [{lat: 41.731047,lng: 1.783573,nom_rocodrom: "1",adreca: "First"},
  {lat: 41.73,lng: 1.75,nom_rocodrom: "2",adreca: "Second"}];
var lat = [];
var lng = [];
var titol = [];
var adreca = [];
for (var i = 0; i < markers.length; i++) {
  lat[i] = markers[i].lat;
  lng[i] = markers[i].lng;
  titol[i] = markers[i].nom_rocodrom;
  adreca[i] = markers[i].adreca;
}

function initMap() {
  var centre = {
    lat: 41.731047,
    lng: 1.783573
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: centre
  });
  for (var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat[i], lng[i]),
      map: map,
      animation: google.maps.Animation.DROP,
      id: i
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        var content = '<div id="content">' +
          '<div id="siteNotice">' +
          '</div>' +
          '<h3 id="firstHeading" class="firstHeading">' + titol[marker.id] + '</h3>' +
          '<img src="">' +
          '<div id="bodyContent">' +
          '<p>' + adreca[marker.id] + '</p>' +
          '<button type="button" class="btn btn-primary">' + '<a class ="boto_roco" href="/rocodroms/{{ $rocodrom->id }}">Informacio</a>' + '</button>' +
          '</div>' +
          '</div>'
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker, i));
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 200
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

it worked fine your answer @geocodezip, sorry if it's a duplicate question, if i have to delete it i will do so — Pol Vilarrasa, Jan 31 '18 at 22:18

Google Maps API infowindow not recieving the value

1 Answers1