CODEWITHSUNDEEP
javascriptgoogle-maps
Alexander
Alexander

Reputation: 528

Adding eventlistener to javascript array

I'm trying to put my markers on google maps and add an InfoWindow to each single marker. I'm getting Cannot read property 'name' of undefined on this line after I click on one of the markers:

markers[i].name.open(map, marker);

Here's the complete script:

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    // zoom in on current location if available (not done yet...)
    center: new google.maps.LatLng(5,5)
  });

  var markers = [
    // put all markers in a markers array
    @foreach ($markers as $marker)
      new google.maps.Marker({
        position: { lat: {{$marker->x}}, lng: {{$marker->y}} },
        // infowindow for each marker with its name
        name: new google.maps.InfoWindow({
          content: "{{$marker->name}}"
        })
      }), 
    @endforeach
  ];

  for (var i = 0; i < markers.length; i++) { 
    // add eventlistener for the infowindow we added earlier
    google.maps.event.addListener(markers[i], 'click', function() {
      markers[i].name.open(map, marker);
    });
    // add marker to map
    markers[i].setMap(map);
  }
}

I'm using Laravel 5.1 with the Blade templating engine.

Upvotes: 1

Views: 85

Answers (2)

geocodezip
geocodezip

Reputation: 161334

This works (this in the click listener refers to the google.maps.Marker that was clicked):

for (var i = 0; i < markers.length; i++) { 
  // add eventlistener for the infowindow we added earlier
  google.maps.event.addListener(markers[i], 'click', function() {
    this.name.open(map, this);
  });
  // add marker to map
  markers[i].setMap(map);
}

proof of concept fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    // zoom in on current location if available (not done yet...)
    center: new google.maps.LatLng(5, 5)
  });

  var markers = [
    // put all markers in a markers array
    // @foreach ($markers as $marker)
    // New York, NY, USA (40.7127837, -74.00594130000002)
    new google.maps.Marker({
      position: {
        lat: 40.7127837,
        lng: -74.0059413
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "New York, NY, USA"
      })
    }),
    // Newark, NJ, USA (40.735657, -74.1723667)
    new google.maps.Marker({
      position: {
        lat: 40.735657,
        lng: -74.1723667
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "Newark, NJ, USA"
      })
    }),
    //  Baltimore, MD, USA (39.2903848, -76.61218930000001)
    new google.maps.Marker({
      position: {
        lat: 39.2903848,
        lng: -76.6121893
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "Baltimore, MD, USA"
      })
    }),
    //    @endforeach
  ];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    // add eventlistener for the infowindow we added earlier
    google.maps.event.addListener(markers[i], 'click', function() {
      this.name.open(map, this);
    });
    // add marker to map
    markers[i].setMap(map);
    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
}
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>

Upvotes: 1

Aishwat Singh
Aishwat Singh

Reputation: 4459

try this ?

 for (var i = 0; i < markers.length; i++) {
            // add eventlistener for the infowindow we added earlier
            (function(i) {
                google.maps.event.addListener(markers[i], 'click', function() {
                    //console.log(markers[i])
                    markers[i].name.open(map, markers[i]);
                });
                // add marker to map
                markers[i].setMap(map);
            })(i);

  }

Upvotes: 1

Related Questions