Google Maps marker grouping

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

12,946

Solution 1

There are various ways to tackle this, but let me show you one approach.

First, let's start with an array of locations (borrowed from the Google Maps API Tutorials):

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 1],
  ['Coogee Beach', -33.923036, 151.259052, 1],
  ['Cronulla Beach', -34.028249, 151.157507, 2],
  ['Manly Beach', -33.800101, 151.287478, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 2]
];

This is actually an array of arrays. It represents 5 Australian beaches, and we have the name, latitude, longitude and category. The category in this case is just a number for the sake of simplicity.

Then it is important that we keep a reference of the markers that we create. To do this, we can use a markers array where we store each new marker, and we can also augment each marker object with its category id:

var markers = [];

var i, newMarker;

for (i = 0; i < beaches.length; i++) {
  newMarker = new google.maps.Marker({
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
    map: map,
    title: beaches[i][0]
  });     

  newMarker.category = beaches[i][3];     
  newMarker.setVisible(false);

  markers.push(newMarker);
}

Finally, when we need to show the markers, we can simply iterate over the markers array, and call the setVisible() method according to what category we would like to show.

You may want to check out the following complete example:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <input type="button" value="Show Group 1" onclick="displayMarkers(1);">
   <input type="button" value="Show Group 2" onclick="displayMarkers(2);">

   <script type="text/javascript"> 

   var beaches = [
     ['Bondi Beach', -33.890542, 151.274856, 1],
     ['Coogee Beach', -33.923036, 151.259052, 1],
     ['Cronulla Beach', -34.028249, 151.157507, 2],
     ['Manly Beach', -33.800101, 151.287478, 2],
     ['Maroubra Beach', -33.950198, 151.259302, 2]
   ];

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.88, 151.28),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   var markers = [];

   var i, newMarker;

   for (i = 0; i < beaches.length; i++) {
     newMarker = new google.maps.Marker({
       position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
       map: map,
       title: beaches[i][0]
     });

     newMarker.category = beaches[i][3];
     newMarker.setVisible(false);

     markers.push(newMarker);
   }

   function displayMarkers(category) {
     var i;

     for (i = 0; i < markers.length; i++) {
       if (markers[i].category === category) {
         markers[i].setVisible(true);
       }
       else {
         markers[i].setVisible(false);
       }
     }
   }

   </script> 
</body> 
</html>

Screenshot from the above example, after clicking on the "Show Group 2" button:

Solution 2

You basically just need to store references to Marker objects in an array, set their type (school, bus stop, etc.) and then on some event loop through and hide/show as appropriate:

var markers = [];

// create Marker

marker.locType = 'school'; //as appropriate

function hideMarkersOfType(type) {
    var i = markers.length;
    while(i--) {
        if (markers[i].locType == type) {
            markers[i].setVisible(false);
        }
    }
}

// similar function showMarkersOfType() calling markers[i].setVisible(true);

That should be a good start anyway.

12,946

Author by

Nikola Sivkov

I'm passionate developer who likes to solve problems

Updated on June 22, 2022

Comments

Nikola Sivkov almost 2 years

I'm trying to achieve the following thing: Have different types of markers on my map for example, schools, libraries, bus stops and I want to be able to show/hide each group of markers.

I have been searching google for a while but nothing came up :/

Any ideas how this can be achieved ?
Nikola Sivkov almost 14 years

nice tutorial ! thanks ! but there is a hole in your displayMarkers function :) if we use the function to show/hide we have to check if the marker is already hidden/shown in order to set it/hide it ;) for (var i = 0; i < allmarkers.length; i++) { if (allmarkers[i].type == type) { if (allmarkers[i].getVisible()) { allmarkers[i].setVisible(false); } else { allmarkers[i].setVisible(true); } } }
Daniel Vassallo almost 14 years

@Aviatrix: My approach in the example was to hide all the markers that do not match the category argument. This happened in the else { markers[i].setVisible(false); } part. This means that sometimes setVisible(false) is called for markers that are already hidden. I assume that the Maps API checks the marker's state internally. That is why I wasn't checking the visibility with getVisible()... Obviously, your approach is equally good.
tim almost 12 years

except it would be better to use markers.setMap(null); this way the map performs better.
geocodezip about 11 years

fixed typos in the posted code (working example)