GoogleマップAPIのトグルボタン

Question

私はGoogleマップで作業します。私の地図では、2つのマーカーがあります。私はそれらを隠した。私はすでに作成したボタンでこれらの2つのマーカーを切り替えたいと思います。

私は以前に別の種類のスクリプトで機能しましたが、ここでは機能しません！ご協力いただきありがとうございます！

var map; 
var markers; 

function initMap() { 


    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

    var nepal = { 
     lat: 28.240381, 
     lng: 83.973038 
    }; 
    map = new google.maps.Map(document.getElementById('nepal_map'), { 
     zoom: 7, 
     center: nepal 
    }); 

    var markers = [ 
     ['Lobuche', 27.955762, 86.794760], 
     ['Island', 27.919593, 86.934933] 
    ]; 

    var infoWindowContent = [ 
     ['Lobuche!!!'], 
     ['Island!!!'] 
    ]; 

    // Display multiple markers on a map 
    var infoWindow = new google.maps.InfoWindow(), 
     marker, i; 

    // Loop through our array of markers & place each one on the map 
    for (i = 0; i < markers.length; i++) { 

     var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
     bounds.extend(position); 
     marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     visible: (false) 
     }); 

     // Allow each marker to have an info window  
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map, marker); 
     } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     map.fitBounds(bounds); 
    } 

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(7); 
     google.maps.event.removeListener(boundsListener); 
    }); 

} 

function toggleMarkers() { 
    if (markers[0].getMap() != null) { 
     var arg = null; 
    } else { 
     var arg = map; 
    } 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(arg); 
    } 
} 

Answer 1

マーカーの可視性を設定するための機能は以下のとおりです。

marker.setVisible(true); 
marker.setVisible(false); 

あなたはマーカーがで表示されているかどうかを確認することができます。私はこれをデモするJSFiddleを作成している

if(marker.getVisible() == true) 

君は。マップは2つの目に見えないマーカーから始まり、上部にはマーカーを切り替えるためのボタンがあります。ボタンをクリックすると、そのボタンが表示されます。もう一度クリックすると表示が消えます。

注：すでに作成したボタンを使用していて、コードがないので、自分のボタンを使用しています。ロジックは、あなた自身のボタンを使用するために同じでなければなりません。フィドルはこちらをご覧ください：

https://jsfiddle.net/jcumhbnw/

注：あなたはそれを動作させるために私のフィドルに、独自のAPIキーを挿入する必要があります。

こちらがお役に立てば幸いです。