1つのボタンでGoogleマップにマーカーの配列を表示/非表示する方法

Question

地図上にマーカーを表示/非表示するボタンを1つ作成しようとしています。コードは、場所の配列の中からマーカーの配列を作成し、最初にそれらを地図上に表示します。マーカーを隠すためにボタンをクリックするとマーカーは隠れますが、マーカーを表示するためにもう一度クリックすると何もしません。私はちょうど初心者ですが、私はこれに長い間立ち往生してきました。助けてください。

var locations = [ 
 
\t ['1', 33.727190, -117.851863], 
 
\t ['2', 34.094715, -117.773466], 
 
\t ['3', 34.143758, -118.782985], 
 
\t ['4', 33.732112, -117.845280], 
 
\t ['5', 33.136157, -117.156101], 
 
\t ['6', 33.875900, -118.034982], 
 
\t ['7', 33.871597, -118.242668], 
 
\t ['8', 33.979397, -118.047032], 
 
\t ['9', 33.710725, -117.859015] 
 
    ]; 
 
    var locationsMarkers = []; 
 
    function initMap() { 
 
\t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t center: {lat: 34.052234, lng: -118.243685}, 
 
\t \t zoom: 8 
 
\t }); 
 
\t setMapOnLocations(map) 
 
    } 
 
    function setLocations(locations) { 
 
\t for (var i = 0; i < locations.length; i++) { 
 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: new google.maps.LatLng(locations[i][1],locations[i][2]), 
 
\t \t \t map: map 
 
\t \t }); 
 
\t \t locationsMarkers.push(marker); 
 
\t } 
 
} 
 

 
function setMapOnLocations(map) { 
 
\t setLocations(locations); 
 
\t for (var i = 0; i < locationsMarkers.length; i++) { 
 
\t \t locationsMarkers[i].setMap(map); 
 
\t } 
 
} 
 

 
function clearLocations() { 
 
\t setMapOnLocations(null); 
 
} 
 

 
function showLocations() { 
 
\t setMapOnLocations(map); 
 
} 
 

 
$(document).ready(function(){ 
 
\t var x = false; 
 
\t $("#button").on('click', function(){ 
 
\t \t if (!x){ 
 
\t \t \t clearLocations() 
 
\t \t \t x = true; 
 
\t \t } 
 
\t \t else { 
 
\t \t \t showLocations() 
 
\t \t \t x = false; 
 
\t \t } 
 
\t }); 
 
});

Answer 1

あなたが効果的にsetMapOnLocations(map)を呼び出すのと同じであるボタンをクリックしshowLocations()秒の時間を呼び出しています。 mapは、DOM準備関数のクロージャまたはコンテキストでは定義されていないため、すべての場所でマップを未定義に設定すると効果的です。

コードでは、mapはグローバル変数ではありません。 1つのクロージャでのみ定義されています。関数はinitMapです。最初の場所に場所が表示されているのに、initMapが終了するとその機能でsetMapOnLocationsに渡すと、Googleマップのインスタンスが失われます。

グーグルマップにグローバル変数を割り当てて、それをshowLocationsで使用すると、それ以外のものはすべて動作するはずです。言い換えれば

、このような何か：

var googleMap; // make the google map instance have global scope 

var locations = [ 
    ['1', 33.727190, -117.851863], 
    ['2', 34.094715, -117.773466], 
    ['3', 34.143758, -118.782985], 
    ['4', 33.732112, -117.845280], 
    ['5', 33.136157, -117.156101], 
    ['6', 33.875900, -118.034982], 
    ['7', 33.871597, -118.242668], 
    ['8', 33.979397, -118.047032], 
    ['9', 33.710725, -117.859015] 
]; 

var locationsMarkers = []; 

function initMap() { 
    // assign the google map instance to the global variable 
    googleMap = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 34.052234, lng: -118.243685}, 
    zoom: 8 
    }); 
    setMapOnLocations(googleMap); 
} 

function setLocations(locations) { 
    for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1],locations[i][2]), 
     map: map // map is undefined here, so this is superfluous 
    }); 
    locationsMarkers.push(marker); 
    } 
} 

function setMapOnLocations(map) { 
    setLocations(locations); 
    for (var i = 0; i < locationsMarkers.length; i++) { 
    locationsMarkers[i].setMap(map); 
    } 
} 

function clearLocations() { 
    setMapOnLocations(null); 
} 

function showLocations() { 
    setMapOnLocations(googleMap); // use the global instance of the google map 
} 

$(document).ready(function(){ 
    var x = false; 
    $("#button").on('click', function(){ 
    if (!x){ 
     clearLocations() 
     x = true; 
    } 
    else { 
     showLocations() 
     x = false; 
    } 
    }); 
}); 

Answer 2

あなたmap変数は、initMap関数に対してローカルです。 HTMLクリックリスナーで使用するには、グローバルスコープにする必要があります。

変更：

function initMap() { 
    var map = new google.maps.Map(...) 

へ：

var map; 
function initMap() { 
    map = new google.maps.Map(...) 

proof of concept fiddle

コードスニペット：

var locations = [ 
 
    ['1', 33.727190, -117.851863], 
 
    ['2', 34.094715, -117.773466], 
 
    ['3', 34.143758, -118.782985], 
 
    ['4', 33.732112, -117.845280], 
 
    ['5', 33.136157, -117.156101], 
 
    ['6', 33.875900, -118.034982], 
 
    ['7', 33.871597, -118.242668], 
 
    ['8', 33.979397, -118.047032], 
 
    ['9', 33.710725, -117.859015] 
 
]; 
 
var map; 
 
var locationsMarkers = []; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 34.052234, 
 
     lng: -118.243685 
 
    }, 
 
    zoom: 8 
 
    }); 
 
    setMapOnLocations(map) 
 
} 
 

 
function setLocations(locations) { 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map 
 
    }); 
 
    locationsMarkers.push(marker); 
 
    } 
 
} 
 

 
function setMapOnLocations(map) { 
 
    setLocations(locations); 
 
    for (var i = 0; i < locationsMarkers.length; i++) { 
 
    locationsMarkers[i].setMap(map); 
 
    } 
 
} 
 

 
function clearLocations() { 
 
    setMapOnLocations(null); 
 
} 
 

 
function showLocations() { 
 
    setMapOnLocations(map); 
 
} 
 

 
$(document).ready(function() { 
 
    var x = false; 
 
    $("#button").on('click', function() { 
 
    if (!x) { 
 
     clearLocations() 
 
     x = true; 
 
    } else { 
 
     showLocations() 
 
     x = false; 
 
    } 
 
    }); 
 
}); 
 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="button" type="button" value="toggle" /> 
 
<div id="map"></div>