Googleマップでチェックボックスを使ってマーカーを表示/非表示にする

Question

JavaScriptとGoogleマップを使ってマーカーを表示/非表示にするにはどうすればよいですか？

マーカーを表示したり非表示にするためにチェックボックスを使用したいと思います。分に2つのマーカーと3つのチェックボックスがあります。 1つはすべてを表示して非表示にし、他のマーカーはそれぞれのマーカーを表示および非表示にします。私はどのようにそれらをチェックボックスに接続し、それぞれを表示/非表示するかわかりません。私が使用していたマーカーの

サンプル：

var Jorvik = createMarker({ 
     position: {lat: 53.95697, lng: -1.08100}, 
    map: map, 
     icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}, 
      "<h1>JORVIK Viking Centre</h1><p>This is the home marker.<br/>test</p>"); 

codepen：https://codepen.io/mike43237/pen/qmEVLE

Answer 1

あなたはマーカー Working Fiddle

ためsetVisible(true/false)メソッドを使用することができますがtoggleGroup（）関数

Answer 2

の使用を参照してくださいmarker.setVisible関数をtrueまたはfalseに設定：

$('#your_checkbox_id').change(function() {  
    Jorvik.setVisible($(this).is(":checked"));    
}); 

グーグルマップを作成します：グーグルマップの

iMap.initialize('map'); 
var Jorvik = iMap.markerCreate('title', 53.95697, -1.08100,true); 

カスタムクラス（あなたのオプションを設定することができます）：

var iMap = { 
marker: null, 
initialize: function(mapElementId) { 
    var mapOptions = { 
     zoom: 15, 
     streetViewControl: this.streetViewControl, 
     scrollwheel: this.scrollwheel, 
     navigationControl: this.navigationControl, 
     minZoom: this.minZoom, 
     maxZoom: this.maxZoom, 
     center: new google.maps.LatLng(53.95697, -1.08100), 
     mapTypeId: 'Styled', 
     mapTypeControlOptions: { 
      mapTypeIds: ['Styled', google.maps.MapTypeId.HYBRID] 
     } 
    };    
    var styelMap = [ 
     { 
      featureType: 'poi', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: -100 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     }, { 
      featureType: 'landscape', 
      elementType: 'all', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: -100 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     }, { 
      featureType: 'transit', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: 0 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     }, { 
      featureType: 'administrative', 
      elementType: 'geometry', 
      stylers: [ 
       { hue: '#ffffff' }, 
       { saturation: 0 }, 
       { lightness: 100 }, 
       { visibility: 'on' } 
      ] 
     } 
    ]; 

    this.map = new google.maps.Map(document.getElementById(mapElementId), mapOptions); 
    this.map.mapTypes.set('Styled', new google.maps.StyledMapType(styelMap, { name: 'Compact map' }));  

}, 
markerCreate: function (title, lat, lng ,draggable ) {    
    this.marker= new google.maps.Marker({ 
      map: this.map, 
      title: title, 
      position: new google.maps.LatLng(lat, lng), 
      animation: google.maps.Animation.DROP, 
      draggable: draggable 

     });  
    google.maps.event.addListener(pin, "drag", function() { 
     // $('#lat').html(pin.position.lat()); 
     // $('#lng').html(pin.position.lng()); 
    }); 

    return this.marker; 


} 

}