CODEWITHSUNDEEP
javascriptgoogle-maps
Alex
Alex

Reputation: 827

Hide MarkerClusterer in Google map?

This is my basic code to add some markers and clustering to the google map.

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="data.json"></script>
    <script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
        for (var i in markers) {
        markers[i].setVisible(false);
}

markerCluster.repaint();

      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

It works fine but I want handle hide/show marker cluster. How can I hide and show MarkerClusterer (number and icon) in google maps?

I tried the code below but it not work. 

        var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
        for (var i in markers) {
        markers[i].setVisible(false);
}

markerCluster.repaint();

Upvotes: 1

Views: 2091

Answers (2)

geocodezip
geocodezip

Reputation: 161324

I would suggest using MarkerClustererPlus.

With that library, you can add a listener to the cluster, and use that to hide the markers in that cluster, hiding the cluster:

google.maps.event.addListener(markerCluster, 'click', function(cluster) {
  var clusterMarks = cluster.getMarkers();
  for (var i in clusterMarks) {
    clusterMarks[i].setVisible(false);
  }

  markerCluster.repaint(); 
  })
}

If you want the markers to display when the map is zoomed in (or to display when the cluster is hidden), you will need to write code to do that (this code just hides the markers in the clicked cluster).

proof of concept fiddle

code snippet:

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var markers = [];
  console.log(data.photos.length);
  for (var i = 0; i < data.photos.length; i++) {
    var dataPhoto = data.photos[i];
    var latLng = new google.maps.LatLng(dataPhoto.latitude,
      dataPhoto.longitude);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
    markers.push(marker);
  }
  console.log(markers.length);
  var markerCluster = new MarkerClusterer(map, markers, {
    ignoreHidden: true,
    zoomOnClick: false,
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
  google.maps.event.addListener(markerCluster, 'click', function(cluster) {
    var clusterMarks = cluster.getMarkers();
    for (var i in clusterMarks) {
      clusterMarks[i].setVisible(false);
    }
    markerCluster.repaint();
  })
}
var data = {
  "count": 13,
  "photos": [{
      "photo_id": 665502,
      "photo_title": "Sunset Beach Walker",
      "photo_url": "http://www.panoramio.com/photo/665502",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/665502.jpg",
      "longitude": -124.077530,
      "latitude": 44.519888,
      "width": 500,
      "height": 340,
      "upload_date": "03 February 2007",
      "owner_id": 107359,
      "owner_name": "Ron Cooper",
      "owner_url": "http://www.panoramio.com/user/107359"
    },
    {
      "photo_id": 723666,
      "photo_title": "Majestically Still",
      "photo_url": "http://www.panoramio.com/photo/723666",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/723666.jpg",
      "longitude": -116.175613,
      "latitude": 51.327608,
      "width": 500,
      "height": 332,
      "upload_date": "07 February 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 723015,
      "photo_title": "Cape Flattery (infrared)",
      "photo_url": "http://www.panoramio.com/photo/723015",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/723015.jpg",
      "longitude": -124.726700,
      "latitude": 48.385898,
      "width": 500,
      "height": 332,
      "upload_date": "07 February 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 1213006,
      "photo_title": "Twilight Drive",
      "photo_url": "http://www.panoramio.com/photo/1213006",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1213006.jpg",
      "longitude": -114.481916,
      "latitude": 51.095841,
      "width": 500,
      "height": 335,
      "upload_date": "07 March 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 298967,
      "photo_title": "Antelope Canyon, Ray of Light",
      "photo_url": "http://www.panoramio.com/photo/298967",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/298967.jpg",
      "longitude": -111.407890,
      "latitude": 36.894037,
      "width": 500,
      "height": 375,
      "upload_date": "04 January 2007",
      "owner_id": 64388,
      "owner_name": "Artusi",
      "owner_url": "http://www.panoramio.com/user/64388"
    },
    {
      "photo_id": 1781717,
      "photo_title": "Water Cuts Rock",
      "photo_url": "http://www.panoramio.com/photo/1781717",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1781717.jpg",
      "longitude": -113.047771,
      "latitude": 37.312154,
      "width": 333,
      "height": 500,
      "upload_date": "15 April 2007",
      "owner_id": 376395,
      "owner_name": "JeffSullivan (www.MyPhotoGuides.com)",
      "owner_url": "http://www.panoramio.com/user/376395"
    },
    {
      "photo_id": 498352,
      "photo_title": "Wave",
      "photo_url": "http://www.panoramio.com/photo/498352",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/498352.jpg",
      "longitude": -112.005315,
      "latitude": 36.995972,
      "width": 500,
      "height": 333,
      "upload_date": "20 January 2007",
      "owner_id": 40260,
      "owner_name": "Don Albonico",
      "owner_url": "http://www.panoramio.com/user/40260"
    },
    {
      "photo_id": 3749005,
      "photo_title": "Once in a Blue Moon....",
      "photo_url": "http://www.panoramio.com/photo/3749005",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/3749005.jpg",
      "longitude": -105.654080,
      "latitude": 40.294560,
      "width": 374,
      "height": 500,
      "upload_date": "05 August 2007",
      "owner_id": 87752,
      "owner_name": "Richard Ryer",
      "owner_url": "http://www.panoramio.com/user/87752"
    },
    {
      "photo_id": 5358174,
      "photo_title": "Morning Glory",
      "photo_url": "http://www.panoramio.com/photo/5358174",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/5358174.jpg",
      "longitude": -110.843537,
      "latitude": 44.475020,
      "width": 500,
      "height": 348,
      "upload_date": "16 October 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 400536,
      "photo_title": "Half Dome Mtn, Yosemite Nat Park,  CA",
      "photo_url": "http://www.panoramio.com/photo/400536",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/400536.jpg",
      "longitude": -119.495888,
      "latitude": 37.811411,
      "width": 500,
      "height": 333,
      "upload_date": "12 January 2007",
      "owner_id": 85489,
      "owner_name": "Bruce MacIver",
      "owner_url": "http://www.panoramio.com/user/85489"
    },
    {
      "photo_id": 400536,
      "photo_title": "Half Dome Mtn, Yosemite Nat Park,  CA",
      "photo_url": "http://www.panoramio.com/photo/400536",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/400536.jpg",
      "longitude": -119.495888,
      "latitude": 37.811411,
      "width": 500,
      "height": 333,
      "upload_date": "12 January 2007",
      "owner_id": 85489,
      "owner_name": "Bruce MacIver",
      "owner_url": "http://www.panoramio.com/user/85489"
    },
    {
      "photo_id": 1800454,
      "photo_title": "Bombay Beach, Salton Sea, CA",
      "photo_url": "http://www.panoramio.com/photo/1800454",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1800454.jpg",
      "longitude": -115.729235,
      "latitude": 33.347316,
      "width": 500,
      "height": 407,
      "upload_date": "16 April 2007",
      "owner_id": 107613,
      "owner_name": "Tom Grubbe",
      "owner_url": "http://www.panoramio.com/user/107613"
    },
    {
      "photo_id": 882660,
      "photo_title": "icy_chains_1_hdr_web",
      "photo_url": "http://www.panoramio.com/photo/882660",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/882660.jpg",
      "longitude": -79.798197,
      "latitude": 43.321353,
      "width": 500,
      "height": 333,
      "upload_date": "18 February 2007",
      "owner_id": 17488,
      "owner_name": "John Gillett",
      "owner_url": "http://www.panoramio.com/user/17488"
    },
    {
      "photo_id": 1413,
      "photo_title": "Champlain Lookout",
      "photo_url": "http://www.panoramio.com/photo/1413",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1413.jpg",
      "longitude": -75.912872,
      "latitude": 45.507640,
      "width": 500,
      "height": 375,
      "upload_date": "06 October 2005",
      "owner_id": 273,
      "owner_name": "JC",
      "owner_url": "http://www.panoramio.com/user/273"
    },
  ]
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<script src="https://cdn.jsdelivr.net/npm/@google/[email protected]/src/markerclusterer.js"></script>

Upvotes: 2

lazydeveloper
lazydeveloper

Reputation: 961

you can hide markes by setting it null.

For hide markers...

function hideMarkers() {
    for (let i in markers) {
        markers[i].setMap(null);
    }
    markerCluster.clearMarkers();
}

for show markers

function showMarkers() {
for (let i in markers) {
    markers[i].setMap(map);
}
markerCluster.addMarkers(markers);

}

Upvotes: 0

Related Questions