Googleマップ - ズームアウト情報ウィンドウを閉じているか、他のラジオボタンフィルタは

Question

「をチェックさ」されたときに、私は2つのことが起こるとき「2」にズームアウトして、このマップを必要とする：

1. あなたが情報ウィンドウを閉じますあなたが別のラジオボタン

をクリックすると

私はいくつかのことを試してみましたが、何も動作していないようにみえます。ここで

は私のコードです：

var map; 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(58, 16), 
     zoom: 2, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
} 

var seg = { 
    1:'invesCastProd', 
    2:'forged', 
    3: 'airframe', 
    5: 'corp', 
    6: 'structurals' 

} 

var comp = { 
    1:'structurals', 
    2:'airfoils', 
    3: 'airfoils', 
    4: 'wyman', 
    5: 'energy', 
    6: 'strucComp', 
    7: 'mechHard', 
    8: 'engineProd', 
    9: 'corp', 
    10: 'aero', 
    12: 'timet', 
    13: 'specMetals' 

} 

var myJSON = {}; 
var myMarkers=[]; 

$.getJSON("locations.json", function(json1) { 
    myJSON=json1; 
    $.each(json1, function(key, data) { 
    var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng 
    }); 
    myMarkers[key]=marker; 
    marker.setMap(map); 

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

    google.maps.event.addListener(marker, 'click', function() { 

     if (infoWindow) {infoWindow.close();} 
     infoWindow = new google.maps.InfoWindow({ 
     content: "<h5>" + data.display_name + "</h5>" + 
     "<div>" + data.street+ "</div>" + 
     "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" + 
     "<div class='mapPhoneNum'>" + data.telephone + "</div>" + 
     "<div><strong>" + seg[data.segment_id] + "</strong></div>" + 
     "<div><strong>" + comp[data.component_id] + "</strong></div>" + 
     "<a href=" + data.web_url + ">Website</a>" 
     }); 
     infoWindow.open(map, marker); 
     map.setZoom(15); 
     map.panTo(this.getPosition()); 

    }); 

    filterMarkers = function(category){ 
     //console.log(category); 

     console.log(category.data()); 
     var component = category.data("component_id"); 
     var segment = category.data("segment_id") 

     // Clear markers 
     setMapOnAll(null); 
     //marker = []; 
     var filteredMarkers=[]; 

     $.each(myJSON, function(key, data) { 
      //console.log(key); 

      if((myJSON[key].component_id == component) && (myJSON[key].segment_id == segment)){ 
      console.log("FOUND"); 

      filteredMarkers.push(key); 
      } 
     }); 

     for(i=0;i<filteredMarkers.length;i++){ 
      myMarkers[filteredMarkers[i]].setMap(map); 
     } 
     } 

    function setMapOnAll(map) { 
     for (var i = 0; i < myMarkers.length; i++) { 
     myMarkers[i].setMap(map); 
     } 
    } 
}); 

}）;

これを達成する最も良い方法は何ですか？

Answer 1

InfoWindowの終了時に問題です。

イベントリスナーが必要です。

ちょうどあなたの "マーカーをクリックし、" リスナーでこれを追加します。
     （google.maps.event.addListener(marker, 'click', function() {） - script.jsのライン＃55。

google.maps.event.addListener(infoWindow,'closeclick',function(){ 
    console.log("CLOSE"); 
    map.setZoom(2); 
    map.setCenter({lat:58,lng:16}); 
}); 

リスナーにリスナーを追加すると奇妙に聞こえると私は知っています。
それはあなたのインフォボックスを定義する場所です...
;）
これは機能します！

EDIT
、そう

を（私は...上記では、第2の要求の世話をしたしていない）機能に上記を移動する必要があります。

function resetMapOrigin(){ 
    console.log("Reseting Map."); 
    map.setZoom(2); 
    map.setCenter({lat:58,lng:16}); 
} 

必要に応じてこの「リセット」機能を呼び出します。
; google.maps.event.addListener(marker, 'click', function() {中）

：

google.maps.event.addListener(infoWindow,'closeclick',function(){ 
    resetMapOrigin(); // See Plunker line #72 
}); 

とfilterMarkers = function(category){で、右setMapOnAll(null);後：

resetMapOrigin(); // See Plunker line #90 

Updated Plunker