Creating a map with sidebar



    Description

    For creating a map with sidebar, I used "addDomListener()".
    Technical point is below code:

    //Trigger a click event to marker when the button is clicked.
    google.maps.event.addDomListener(li, "click", function(){
    	google.maps.event.trigger(marker, "click");
    });
    

    Then the marker catch the event, and works the event listener below:
    //Trigger a click event to marker when the button is clicked.
    google.maps.event.addDomListener(li, "click", function(){
    	google.maps.event.trigger(marker, "click");
    });
    



    Code

    <script type='text/javascript'>
    
    var stationList = [
      {"latlng":[35.681382,139.766084],name:"Tokyo Station"},
      {"latlng":[35.630152,139.74044],name:"Shinagawa Station"},
      {"latlng":[35.507456,139.617585],name:"Shin-Yokohama Station"},
      {"latlng":[35.25642,139.154904],name:"Odawara Station"},
      {"latlng":[35.103217,139.07776],name:"Atami Station"},
      {"latlng":[35.127152,138.910627],name:"Mishima Station"},
      {"latlng":[35.142015,138.663382],name:"Shin-Fuji Station"},
      {"latlng":[34.97171,138.38884],name:"Shizuoka Station"},
      {"latlng":[34.769758,138.014928],name:"Kakegawa Station"},
      {"latlng":[34.703741,137.734442],name:"Hamamatsu Station"},
      {"latlng":[34.762811,137.381651],name:"Toyohashi Station"},
      {"latlng":[34.96897,137.060662],name:"Mikawa-Anjyo Station"},
      {"latlng":[35.170694,136.881637],name:"Nagoya Station"},
      {"latlng":[35.315705,136.685593],name:"Gifu-Hashima Station"},
      {"latlng":[35.314188,136.290488],name:"Yonehara Station"},
      {"latlng":[34.985458,135.757755],name:"Kyoto Station"},
      {"latlng":[34.73348,135.500109],name:"Shin-Osaka Station"}
    ];
    var infoWnd, mapCanvas;
    function initialize() {
      //Creates a map object.
      var mapDiv = document.getElementById("map_canvas");
      mapCanvas = new google.maps.Map(mapDiv);
      mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      
      //Creates a infowindow object.
      infoWnd = new google.maps.InfoWindow();
      
      //Mapping markers on the map
      var bounds = new google.maps.LatLngBounds();
      var station, i, latlng;
      for (i in stationList) {
        //Creates a marker
        station = stationList[i];
        latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
        bounds.extend(latlng);
        var marker = createMarker(
          mapCanvas, latlng, station.name
        );
        
        //Creates a sidebar button for the marker
        createMarkerButton(marker);
      }
      //Fits the map bounds
      mapCanvas.fitBounds(bounds);
    }
    function createMarker(map, latlng, title) {
      //Creates a marker
      var marker = new google.maps.Marker({
        position : latlng,
        map : map,
        title : title
      });
      
      //The infoWindow is opened when the sidebar button is clicked
      google.maps.event.addListener(marker, "click", function(){
        infoWnd.setContent("<strong>" + title + "</title>");
        infoWnd.open(map, marker);
      });
      return marker;
    }
    function createMarkerButton(marker) {
      //Creates a sidebar button
      var ul = document.getElementById("marker_list");
      var li = document.createElement("li");
      var title = marker.getTitle();
      li.innerHTML = title;
      ul.appendChild(li);
      
      //Trigger a click event to marker when the button is 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