Basculer cacher / afficher Google Map Markers

J'ai une carte Google personnalisée avec des marqueurs d'emplacements d'artistes. Je veux faire 8 catégories différentes de marqueurs. J'ai lu au sujet d'avoir à faire des tableaux de marqueurs et d'attribuer une catégorie, mais je ne sais honnêtement par où commencer …

Je pense que cette question est proche de ce que je veux: basculez / désactivez les marqueurs de carte Google par catégorie . J'ai essayé d'obtenir ce travail, mais en vain, j'ai juste trop peu de connaissances.

Voici mon HTML. J'ai une carte et quelques cases cochées, les cases à cocher ne sont pas encore utilisées.

<body onload="initialize()"> <div id="map_container"> <div id="map_canvas" style="width:700px; height:350px"> </div> </div> <div id="map_filter"> <form action="#"> <input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /><label>Beeldende kunst</label><br /> <input type="checkbox" id="film" onclick="displayMarkers(2)" /><label>Film/fotografie</label><br /> <input type="checkbox" id="dans" onclick="displayMarkers(3)" /><label>Dans</label> </form> </div> </body> 

Et voici mon JS. J'ai une icône cat1 shadow et cat1, qui devrait être de 8 types différents, mais ce n'est peut-être pas la façon de le faire, donc je l'ai gardé à un seul chat pour la lisibilité. Ensuite, j'ai un marqueur (art1) qui a sa propre position, l'ombre, etc.

 function initialize() { var latlng = new google.maps.LatLng(52.0840356, 5.1546501); var settings = { zoom: 13, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+ '<div id="bodyContent">'+ '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var cat1Shadow = new google.maps.MarkerImage('images/shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50) ); var cat1Icon = new google.maps.MarkerImage('images/beeldend.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501); var art1Marker = new google.maps.Marker({ position: art1Pos, map: map, icon: cat1Icon, shadow: cat1Shadow, title:"Beeldende kunst", zIndex: 4 }); google.maps.event.addListener(art1Marker, 'click', function() { infowindow.open(map,art1Marker); }); } 

Alors .. Quelle est la meilleure façon de créer différents tableaux de marqueurs et de basculer leur visibilité avec des cases à cocher?

En outre, j'aimerais pouvoir assigner des adresses aux marqueurs au lieu de rechercher les coordonnées.

Je vous remercie

Peut-être que vous devriez le faire plus simple … Comme je l'ai fait. Déversez vos données de marqueur dans FusionTables, puis copiez / collez ma source à partir d'ici http://www.strahlen.org/map/map.htm

Cheers, Frank

La meilleure façon de créer différents tableaux de marqueurs est de faire quelque chose comme ça. Vous avez dit que vous aviez 8 catégories de marqueurs, alors faites-le 8 fois.

 var locations = [ ['Shanghai', 31.232, 121.47, 5885], ['Beijing', 39.88, 116.40, 6426], ['Guangzhou', 23.129, 113.264, 4067], ['Shenzhen', 22.54, 114.05, 3089], ['Hangzhou', 30.27, 120.15, 954], ['Hong Kong', 22.39, 114.10, 1885] ]; function getMarkers() { for (i = 0; i < locations.length; i++) { marker[i] = new MarkerWithLabel({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), draggable: false, map: map, labelContent: locationsCA[i][3], icon: new google.maps.MarkerImage(iconArray[i]), labelAnchor: new google.maps.Point(30, 0), labelClass: "labels", // the CSS class for the label labelStyle: {opacity: 0.75} }); 

En ce qui concerne votre deuxième question sur la visibilité des cases à cocher, je ne sais pas comment faire des cases à cocher, mais la fonction de basculement peut être facilement implémentée avec un déclencheur d'événement. Que ce soit un marqueur ou un zoom, ou tout autre événement (vérifiez la documentation pour les événements), vous avez configuré une action suite à cet événement. Voici un exemple.

 google.maps.event.addListener(map,'zoom_changed',function () { if (map.getZoom() >= 4) { hideMarkers(); } } 

Et votre fonction hideMarkers () utilise cette commande pour la rendre invisible

 marker.setVisible(false); 

J'espère que cela pourra aider

Vous pouvez les stocker dans un tableau et basculer la visibilité avec marker.setMap (null) pour invisible et marker.setMap (map) pour visible.

Voir l'exemple à partir des documents: https://developers.google.com/maps/documentation/javascript/examples/marker-remove