Google지도는 체크 박스를 사용하여 마커를 보이거나 숨 깁니다.

Question

JavaScript 및 Google지도를 사용하여 마커를 표시하고 숨기려면 어떻게해야합니까?

마커를 표시하고 숨기려면 확인란을 사용하고 싶습니다. 분당 두 개의 마커와 세 개의 체크 박스가 있습니다. 하나는 모두 표시하고 숨기고 다른 하나는 각 표식을 표시하거나 숨 깁니다. 나는 그들을 체크 박스에 연결하고 그것들을 보이거나 숨길 수있는 방법을 모르겠다.

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

가 toggleGroup() 함수를

Answer 2

사용을 참조 마커 setVisible(true/false) 방법을 사용할 수 있습니다 marker.setVisible 함수를 true 또는 false로 설정합니다.

구글 맵

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

사용자 정의 클래스 (당신이 당신의 옵션을 설정할 수 있습니다) :

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

이 구글 맵을 작성

이

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; 


} 

}