CODEWITHSUNDEEP
javascriptgoogle-mapsbuttonclick
sci-guy
sci-guy

Reputation: 2584

Google maps control buttons

http://jsfiddle.net/9hYv4/1

I am trying to control the labels of my map - on and off that is.

I can't seem to get it to work. See above for fiddle.

I have defined my buttons to call function, and the function to either show the labels or to not.

here is some of the code: JAVASCRIPT:

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
    setAllMap(map);
}

HTML:

<div id="panel">
    <input onclick="clearMarkers();" checked="checked" type="checkbox" value="Hide Markers"><label>Hide Markers</label>
    <input onclick="showMarkers();" type="button" value="Show All Markers">
</div>

EDIT

Please see here: http://jsfiddle.net/9hYv4/10/

I don't know what I was thinking. What I am after is a checkbox that toggles the hide/show icons. So when checked the icons show up, when unchecked the icons are hidden.

The code in the fiddle and jsbin work fairly well, however as can be seen in my posted fiddle, the grouping of icons (markerCluster) is not working anymore.

click on the fiddle and zoom out to see. Those icons should be clustered.

I hope this is clear?

I really appreciate the help thus far :) I am truly thankful for the time spent to help me.

And just to summarize: I am after the hide/show toggle of icons using a checkbox button. And to restore the cluster functions.

THANK YOU SO MUCH :)

Upvotes: 1

Views: 245

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

You have some errors in the code. One is connected with variables which are not visible and should be set as global:

var map,
    markers = [];

The next is connected with checkbox. Show/hide sequence is connected with combination of states of checkbox and button (sometimes checkbox is unchecked and markers are hidden). It's better to react on checkbox value. See new function handleMarkers:

function handleMarkers() {
    if (cBox.checked) {
        clearMarkers();
    } else {
        showMarkers();
    }
}

<input onclick="handleMarkers();" id='cBox' checked="checked" type="checkbox" value="Hide Markers"><label>Hide Markers</label>

And markers show again on change zoom. It is connected with MarkerClusteres. New event listener has to be added:

map.fitBounds(bounds);

google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log('zoom changed!');
    if (cBox.checked) {
        markerCluster.clearMarkers();
    } else {
        markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    }
})

See updated example at jsbin: changed clearMarkers() and showMarkers() functions to handle marker clusters.

Update: This version at jsBin does not create new marker clusterer objects but just clear/add markers from/to existing one. Should be better option.

Zoom change event handler: restore markers only if markerCluster is empty:

google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log('zoom changed!');
    if (cBox.checked) {
        markerCluster.clearMarkers();
    } else {
        var totArray = markerCluster.getTotalMarkers();
        if (totArray == 0) {
            markerCluster.addMarkers(markers);
        }
        //markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    }
})

Upvotes: 2

Related Questions