InfoWindowがGoogleマップで閉じられているときにマップをズームアウトする方法は？

Question

InfoWindowを閉じたときにマップをズームアウトしたいと思います。私はこれを試しました。

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map); 
      map.panTo(this.getPosition()); 
      map.setZoom(6); 
     } 

    })(marker, i)); 

    google.maps.event.addListener(marker, 'closeclick', (function(marker, i){ 
     return function() { 
       map.panTo(this.getPosition()); 
       map.setZoom(2); 
     } 
    })(marker, i)); 

しかし、それは動作しません。誰でも私を助けることができる！ 私のマップにはいくつかのマーカーがあり、マーカーがクリックされると、その位置にズームインします。InfoWindowを閉じると、ズームアウトを適用します。

Answer 1

google.maps.Markerには 'closeclick'イベントがありません。そのイベントをInfoWindowで聞く必要があります。

google.maps.event.addListener(infoWindow, 'closeclick', function() { 
    map.panTo(this.getPosition()); 
    map.setZoom(2); 
}); 

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter() 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var infoWindowContent = []; 
 
    infoWindowContent[0] = ["test"]; 
 
    var i = 0; 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
    return function() { 
 
     infoWindow.setContent(infoWindowContent[i][0]); 
 
     infoWindow.open(map, marker); 
 
     map.panTo(this.getPosition()); 
 
     map.setZoom(6); 
 
    } 
 

 
    })(marker, i)); 
 

 
    google.maps.event.addListener(infoWindow, 'closeclick', function() { 
 
    map.panTo(this.getPosition()); 
 
    map.setZoom(2); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

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