Google Maps zeigt und versteckt Marker mithilfe von Kontrollkästchen

Question

Wie kann ich Marker mithilfe von JavaScript und Google Maps anzeigen und ausblenden?

Ich möchte Kontrollkästchen verwenden, um Markierungen anzuzeigen und zu verbergen, sobald ich zwei Markierungen und drei Kontrollkästchen habe. eine, um alle und die anderen zu zeigen und zu verstecken, um jeden Marker zu zeigen und zu verstecken. Ich bin nicht sicher, wie man sie an Checkboxen anschließt und sie jeweils anzeigt/versteckt.

Probe eines Markers ich verwende:

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

Sie können setVisible(true/false) Methode für Marker Working Fiddle

sehen verwenden, um den toggleGroup() Funktion

Answer 2

Verwenden marker.setVisible Funktion und setzen wahr oder falsch:

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

erstellen Karte google:

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

Individuelle Klasse für google map (Sie Ihre Option festlegen können):

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; 


} 

}