Google Maps API：隠しマーカーを表示するにはどうすればよいですか？

Question

私は公式のAPIドキュメントを踏襲し、そのような機能を思い付いた：、私のことができ「再表示」というマーカーのいくつかは、私はできない関数を記述しようとしていますが

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

このアクションを元に戻すためのドキュメントを見つけてください。どうすればこれを達成できますか？

Answer 1

私はあなたが表示したいマーカーにsetMap()を呼び出し、nullではなくgoogle.maps.Mapのインスタンスを渡すことができると信じています。

Answer 2

マップ変数はグローバルスコープ内にある必要があります（HTMLクリックリスナー関数はグローバルスコープで実行されます）。

proof of concept fiddle with global map variable

コードスニペット：

// global variables 
 
var map; 
 
var markers = []; 
 

 
function initialize() { 
 
    // initialize global map variable 
 
    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 marker1 = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter() 
 
    }); 
 
    markers.push(marker1); 
 
    var marker2 = new google.maps.Marker({ 
 
    map: map, 
 
    position: { 
 
     lat: 37.4529598, 
 
     lng: -122.1817252 
 
    } 
 
    }) 
 
    markers.push(marker2); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" onclick="setMapOnAll(null);" value="hide" /> 
 
<input type="button" onclick="setMapOnAll(map);" value="show" /> 
 
<div id="map_canvas"></div>