Categorised markers with a side bar



Code

<script type='text/javascript'>

      var stationList = [
        {"latlng":[35.681382,139.766084],name:"Tokyo Station", nozomi : 1, hikari : 1, kodama : 1},
        {"latlng":[35.630152,139.74044],name:"Shinagawa Station", nozomi : 1, hikari : 1, kodama : 1},
        {"latlng":[35.507456,139.617585],name:"Shin-Yokohama Station", nozomi : 1, hikari : 1, kodama : 1},
        {"latlng":[35.25642,139.154904],name:"Odawara Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[35.103217,139.07776],name:"Atami Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[35.127152,138.910627],name:"Mishima Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[35.142015,138.663382],name:"Shin-Fuji Station", nozomi : 0, hikari : 0, kodama : 1},
        {"latlng":[34.97171,138.38884],name:"Shizuoka Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[34.769758,138.014928],name:"Kakegawa Station", nozomi : 0, hikari : 0, kodama : 1},
        {"latlng":[34.703741,137.734442],name:"Hamamatsu Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[34.762811,137.381651],name:"Toyohashi Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[34.96897,137.060662],name:"Mikawa-Anjyo Station", nozomi : 0, hikari : 0, kodama : 1},
        {"latlng":[35.170694,136.881637],name:"Nagoya Station", nozomi : 1, hikari : 1, kodama : 1},
        {"latlng":[35.315705,136.685593],name:"Gifu-Hashima Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[35.314188,136.290488],name:"Yonehara Station", nozomi : 0, hikari : 1, kodama : 1},
        {"latlng":[34.985458,135.757755],name:"Kyoto Station", nozomi : 1, hikari : 1, kodama : 1},
        {"latlng":[34.73348,135.500109],name:"Shin-Osaka Station", nozomi : 1, hikari : 1, kodama : 1}
      ];
      
      //Create a infoWindow for all markers
      var infoWnd = new google.maps.InfoWindow();
      
      //To control markers' visibility by radio buttons.
      var markerController = new google.maps.MVCObject();
      
      //Initialization
      function initialize() {
        //Create a map
        var mapDiv = document.getElementById("map_canvas");
        mapCanvas = new google.maps.Map(mapDiv);
        mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        
        //selectChanged function will be involved when a radio button is clicked.
        var i, choise = [ 
          document.getElementById("nozomi"),
          document.getElementById("hikari"),
          document.getElementById("kodama")
        ];
        for (i = 0; i < choise.length; i++) {
          google.maps.event.addDomListener(choise[i], "click", selectChanged);
        }
        

        //Putting markers onto the map
        var bounds = new google.maps.LatLngBounds();
        var station, latlng;
        
        for ( i = 0; i < stationList.length; i++) {
          station = stationList[i];
          latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
          bounds.extend(latlng);
          var marker = createMarker({
            map : mapCanvas,
            position : latlng,
            others : station
          });

          //Create side-bar buttons
          createMarkerButton(marker);
        }
        //Fits the viewport to the bounds.
        mapCanvas.fitBounds(bounds);
        
        
        //Sets the initial selected value
        markerController.set("select", "kodama");
        google.maps.event.trigger(choise[2], "click");
      }
      
      //This function will be involved when a radio button is clicked.
      //select_changed events will be fired for every markers when the markerController's property is updated.
      function selectChanged() {
        var selectedVal = this.value;
        markerController.set("select", selectedVal);
        
        //Changes visibilities for each <ul>.
        var i, ul, listNames = ["nozomi", "hikari", "kodama"];
        for (i = 0; i < listNames.length; i++) {
          ul = document.getElementById(listNames[i] + "_list");
          if (listNames[i] === selectedVal) {
            ul.style.display = "block";
          } else {
            ul.style.display = "none";
          }
        }
      }

      //Create a marker.
      function createMarker(params) {
        var marker = new google.maps.Marker(params);

        //When the marker is clicked, the infoWindow is displayed.
        google.maps.event.addListener(marker, "click", function() {
          infoWnd.setContent("<strong>" + params.others.name + "</strong>");
          infoWnd.open(params.map, marker);
        });

        // Binds the select properties between marker and markerController.
        // If markerController.select is changed, then marker.select would be changed, and
        // a select_changed event is fired.
        marker.bindTo("select", markerController, "select");
        google.maps.event.addListener(marker, "select_changed", changeMarkerVisibility);
        return marker;
      }
      
      //If markerController.select is changed, 
      //then check the each value of params.others,
      //and change the visibility of the marker.
      function changeMarkerVisibility() {
        //"this" means "marker".
        var marker = this;
        var others = marker.get("others");
        
        //The selected value of radio buttons.(nozomi / hikari / kodama)
        var selectedVal = marker.get("select");
        
        //Determine the marker's visibility.
        marker.setVisible( others[selectedVal] ? true : false );
      }

      //Create buttons each <ul>s.
      function createMarkerButton(marker) {
        var others = marker.get("others"),
            i, name, ul, li,
            listNames = ["nozomi", "hikari", "kodama"];
            
        
        // Only creates a button when the propery is 1. (i.e. nozomi = 1)
        for (i = 0; i < listNames.length; i++) {
          name = listNames[i];
          if (others[ name ]) {
            ul = document.getElementById( name + "_list" );
            li = document.createElement("li");
            li.innerHTML = others.name;
            ul.appendChild(li);
            
            //If the button is clicked, then the marker would be clicked.
            google.maps.event.addDomListener(li, "click", function() {
              google.maps.event.trigger(marker, "click");
            });
          }
        }
        
      }
      
      google.maps.event.addDomListener(window, "load", initialize);
  </script>

Search
Books
Google Maps API Programming Guide

Four Google Maps API Experts wrote this book. Introducing useful examples for developers!
See more details