Enabling and Disabling large amounts of markers in Google Maps API V3

Question

I have a program that will have a couple thousand markers on it. Performance isn't the issue here, but organizing the markers so they make sense is what I am going for. I was thinking about making a few check boxes and for example, turning group 1 which has 500 markers on and off and leave group 2 on which has say 200. I have not, however, in my research been able to figure out a viable method for this.

I found this example: http://www.geocodezip.com/v2_MarkerCheckBoxesNoXml.asp.

However, if you look at the code for it markers are created like this:

var point = new GLatLng(43.545068,-89.994888);
var marker = createMarker(point, '<div id="infowindow" style="white-space: nowrap;">
church of god<br>1225 n dewey ave<br>Reedsburg, WI<br><a 
href=http://>  </a></div>','purple');

Which is a lot of code for a single marker.

I would prefer it to be something like this:

var yellowMarkers = new [[39.9406864, -77.8082025],   
[33.4482117, -112.0709371],[42.922825, -85.6523916],[40.331837, -79.3783739]];

for (var i = 0; i < yellowMarkers.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    // icon: image,
    shape: shape,
    title: place[0],
    zIndex: place[3]
});}

I am new to javascript so if this is a dumb question just send me the right way... but is there a way to organize markers like you would from that example using sets of arrays instead of creating every marker individually?

This has been asked many, _many_ times before - [**Google Maps API v3: How to remove all markers?**](http://stackoverflow.com/q/1544739/1407478) is just one of many examples. — davidkonrad, Mar 12 '15 at 17:07
Well I was meaning more of creating multiple groups and enabling and disabling them dynamically... I see that it is similar now. Would this be redundant then? and should I just delete it if that is the case? — Zephan Spencer, Mar 13 '15 at 21:15
No, just accept and upvote the answer below you like best. But in the future, look around for similar questions before posting a new one. +1 for your concern. — davidkonrad, Mar 13 '15 at 21:20

MrUpsidown · Accepted Answer · 2020-03-25T18:24:32.680

You need to create an array for each markers group and push each marker to the correct array. Once this is done, you can easily toggle the visibility (or add/remove from the map) for each group of markers.

For example, if I take your code with yellowMarkers:

var yellowMarkers = [[39.9406864, -77.8082025], [33.4482117, -112.0709371], [42.922825, -85.6523916], [40.331837, -79.3783739]];

// Create an empty array to hold your yellow markers
var yellowMarkersArray = [];

for (var i = 0; i < yellowMarkers.length; i++) {

    var place = locations[i];
    var myLatLng = new google.maps.LatLng(place[1], place[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shape: shape,
        title: place[0],
        zIndex: place[3]
    });

    // Push each yellow marker to the corresponding array
    yellowMarkersArray.push(marker);
}

Then in another function to hide your yellow markers:

for (var i=0; i<yellowMarkersArray.length; i++) {

    yellowMarkersArray[i].setVisible(false);
}

or if you want to remove them from the map:

for (var i=0; i<yellowMarkersArray.length; i++) {

    yellowMarkersArray[i].setMap(null);
}

and of course if you want to add them back, either use setVisible(true) if you used the first method, or setMap(map) (map being your map object).

for (var i=0; i<yellowMarkersArray.length; i++) {

    yellowMarkersArray[i].setMap(map);
}

Hope this helps!

Zephan Spencer · Answer 2 · 2015-03-13T20:47:16.333

Okay so I finished it all up... here it is if anyone ever wants it. Also, is this an absolutely horrible way to do this? Just wondering since I don't have much of a clue still when it comes to proper practices with JavaScript.(also it doesn't look too pretty right now just because of how I made the map)

JavaScript

<script type="text/javascript">

        function initialize() {

            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(40.866711, -101.465781)
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            setContactMarkers(map, redMarkers);
            setWorkerCompMarkers(map, yellowMarkers);
        }
        var redMarkers = [[39.9406864, -77.8082025],[33.4482117, -112.0709371],[42.922825, -85.6523916]];
        var yellowMarkers = [[40.331837, -79.3783739],[40.0090366, -75.7031451],[40.4750889, -79.833905]];
        var yellowMarkersArray = [];
        var redMarkersArray = [];

        function setContactMarkers(map, locations) {
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };
            // Create an empty array to hold your red markers
            for (var i = 0; i < redMarkers.length; i++) {

                var place = locations[i];
                var myLatLng = new google.maps.LatLng(place[0], place[1]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    shape: shape
                });

                // Push each red marker to the array
                redMarkersArray.push(marker);
            }
        }
        function setWorkerCompMarkers(map, locations) {
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };
            // Create an empty array to hold your yellow markers
            for (var i = 0; i < yellowMarkers.length; i++) {

                var place = locations[i];
                var myLatLng = new google.maps.LatLng(place[0], place[1]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    shape: shape,
                    icon: "http://labs.google.com/ridefinder/images/mm_20_yellow.png"
                });

                // Push each yellow marker to the array
                yellowMarkersArray.push(marker);
            }
        }

        function yellowMarkersSwitch(color){
            // map.closeInfoWindow();
            if (document.getElementById(color).checked==false) { // hide the marker
                for (var i=0; i<yellowMarkersArray.length; i++) {
                    yellowMarkersArray[i].setVisible(false);
                }
            }
            else { // show the marker again
                for (var i=0; i<yellowMarkersArray.length; i++) {
                    yellowMarkersArray[i].setVisible(true);
                }
            }
        }
        function redMarkersSwitch(color){
            // map.closeInfoWindow();
            if (document.getElementById(color).checked==false) { // hide the marker
                for (var i=0; i<redMarkersArray.length; i++) {
                    redMarkersArray[i].setVisible(false);
                }
            }
            else { // show the marker again
                for (var i=0; i<yellowMarkersArray.length; i++) {
                    redMarkersArray[i].setVisible(true);
                }
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

HTML

<body>
    <form name="form1" action=""><strong>Toggles</strong><br />
        <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" width="12" height="20" title="Red Markers" alt="Red Marker" /> 
        <input type="checkbox" name="red" id="red" onclick="redMarkersSwitch('red')" checked="checked" /> Red Markers<br />
        <img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" width="12" height="20" title="Yellow Markers" alt="Yellow Marker" /> 
        <input type="checkbox" name="yellow" id="yellow" onclick="yellowMarkersSwitch('yellow')" checked="checked" /> Yellow Markers<br />
    </form> <br />
</body>

Enabling and Disabling large amounts of markers in Google Maps API V3

2 Answers2

JavaScript

HTML