CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Alejandro Veintimilla
Alejandro Veintimilla

Reputation: 11523

google.maps.event.addListener is not a function

I've been trying to add infowindows to my markers and I'm stuck since the avaible SO answers are pretty old. I have this code that corresponds to this answer in SO:

var map_center = new google.maps.LatLng(-0.179041, -78.499211);
        var map = new google.maps.Map(document.getElementById('mapa_ciudad'),
                mapOptions);

        marker_objects = [];

        for (i = 0; i < markers.length; i++){
            marker = new google.maps.Marker({
               position: new google.maps.LatLng(markers[i][1], markers[i][2]),
               map : map,
               title: markers[i][0]
            });

            var infowindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, "click", function(marker){   
    // !!! PROBLEM HERE
                return function(){
                    var content = [marker.title];
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                }
            })(marker);

            marker_objects.push(marker);
        }

        function AutoCenter(){
            var bounds = new google.maps.LatLngBounds();
            $.each(marker_objects, function(index, marker){
               bounds.extend(marker.position)
            });
            map.fitBounds(bounds);
        }

        AutoCenter();

I get the error TypeError: google.maps.event.addListener(...) is not a function

Upvotes: 3

Views: 19069

Answers (2)

geocodezip
geocodezip

Reputation: 161334

You have an error in the definition of the anonymous function that creates the event listener function. Your code:

google.maps.event.addListener(marker, "click", function(marker){   
// !!! PROBLEM HERE
    return function(){
        var content = [marker.title];
        infowindow.setContent(content);
        infowindow.open(map, marker);
    }
})(marker);

Should be (note the extra set of parentheses):

google.maps.event.addListener(marker, "click", (function(marker) {
  return function(evt) {
    var content = marker.getTitle();
    infowindow.setContent(content);
    infowindow.open(map, marker);
  }
})(marker));

working fiddle

code snippet:

function initialize() {
  var map_center = new google.maps.LatLng(-0.179041, -78.499211);
  var map = new google.maps.Map(document.getElementById('mapa_ciudad'), {
    zoom: 4,
    center: map_center
  });

  marker_objects = [];

  for (i = 0; i < markers.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(markers[i][1], markers[i][2]),
      map: map,
      title: markers[i][0]
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, "click", (function(marker) {
      return function(evt) {
        var content = marker.getTitle();
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker));

    marker_objects.push(marker);
  }

  function AutoCenter() {
    var bounds = new google.maps.LatLngBounds();
    $.each(marker_objects, function(index, marker) {
      bounds.extend(marker.position)
    });
    map.fitBounds(bounds);
  }

  AutoCenter();
}
google.maps.event.addDomListener(window, "load", initialize);
var markers = [
  ['mark 1', 33.890542, 151.274856, 'address 1'],
  ['mark 2', 33.923036, 151.259052, 'address 2'],
  ['mark 3', 34.028249, 151.157507, 'address 3'],
  ['mark 4', 33.800101, 151.287478, 'address 4'],
  ['mark 5', 33.950198, 151.259302, 'address 5']
];
html,
body,
#mapa_ciudad {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapa_ciudad"></div>

Upvotes: 6

Farside
Farside

Reputation: 10327

Typical errors like that are connected to wrong usage of API. The problem here is that you are mixing Google Maps version two objects with Version 3. Double check the manual.

For your case, if you are using V.3, please reference this example, events handlers are invoked a bit differently.

Upvotes: 0

Related Questions