Toggle hide/show Google map markers

javascript google-maps google-maps-api-3 google-maps-markers

35,867

Solution 1

The best way to create different arrays of markers is to do something like this. You said you had 8 categories of markers, so do this 8 times.

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}
            });

As for your second question about toggle visibility with check boxes, I don't know how to make check boxes, but the toggle feature can be easily implemented with an event trigger. Whether it is a marker click or a zoom, or any other event (check the documentation for events), you get set up an action following that event. Here is an example.

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

And your hideMarkers() function with use this command to make it invisible

marker.setVisible(false);

Hope that helps

Solution 2

you can store them in an array and toggle the visbility with marker.setMap(null) for invisible and marker.setMap(map) for visible.

see the example from the docs: https://developers.google.com/maps/documentation/javascript/examples/marker-remove

35,867

Author by

meneerfab

Updated on January 15, 2020

Comments

meneerfab over 4 years

I have a custom Google map with markers of artist locations. I want to make 8 different categories of markers. I read about having to make arrays of markers and assigning a category, but I honestly don't know where to start..

I think this question comes close to what I want: Toggle on/off Google map markers by category. Tried to get that working, but to no avail, I just have too little knowledge.

Here's my HTML. I have a map and a few checkboxes ready, the checkboxes aren't used yet.

<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>

And here's my JS. I have a cat1 shadow and cat1 icon, that should be 8 different kinds, but this maybe isn't the way to do it so I kept it at just one cat for readability. Then I have one marker (art1) that has it's own pos, shadow 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);
});

}

So.. What's the best way to create different arrays of markers and toggle their visibility with check boxes?

Also, I'd like to be able to assign addresses to markers in stead of looking up the coordinates.

Thank you