Google Map Слушатель событий не работает

Question

Я использовал карту мест для поиска местоположения, и когда пользователь нажимает на маркер, я создал прослушиватель, чтобы увеличить карту, но, похоже, не работает.

Я попытался

<script> 
    function initialize() { 

     var markers = []; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759), 
      new google.maps.LatLng(-33.8474, 151.2631)); 
     map.fitBounds(defaultBounds); 

     // Create the search box and link it to the UI element. 
     var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input')); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

     var searchBox = new google.maps.places.SearchBox(
     /** @type {HTMLInputElement} */(input)); 

     // [START region_getplaces] 
     // Listen for the event fired when the user selects an item from the 
     // pick list. Retrieve the matching places for that item. 
     google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 

     for (var i = 0, marker; marker = markers[i]; i++) { 
      marker.setMap(null); 
     } 

     // For each place, get the icon, place name, and location. 
     markers = []; 
     var bounds = new google.maps.LatLngBounds(); 
     for (var i = 0, place; place = places[i]; i++) { 
      var image = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      var marker = new google.maps.Marker({ 
      map: map, 
      icon: image, 
      title: place.name, 
      position: place.geometry.location 
      }); 

      markers.push(marker); 

      bounds.extend(place.geometry.location); 
     } 

     map.fitBounds(bounds); 
     }); 
     // [END region_getplaces] 

     // Bias the SearchBox results towards places that are within the bounds of the 
     // current map's viewport. 
     google.maps.event.addListener(map, 'bounds_changed', function() { 
     var bounds = map.getBounds(); 
     searchBox.setBounds(bounds); 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(13); 
     map.setCenter(marker.getPosition()); 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Это не похоже на работу, какие-то предложения?

Answer 1

Вы создаете несколько маркеров в for петле прослушивания событий google.maps.event.addListener(searchBox, 'places_changed', function() {...}. Но прослушиватель событий для маркера установлен за его пределами.

Он должен быть перемещен на место после создания маркеров:

 // Create a marker for each place. 
     var marker = new google.maps.Marker({ 
      map: map, 
      icon: image, 
      title: place.name, 
      position: place.geometry.location 
     }); 

     markers.push(marker); 

     google.maps.event.addListener(marker, 'click', function() { 
      map.setZoom(13); 
      map.setCenter(marker.getPosition()); 
     }); 

     bounds.extend(place.geometry.location); 
    }