サイドバー付きの地図を作る



    説明

    サイドバー付きの地図を作る方法には、いくつもやり方があります。 ここではDOMイベントをのaddDomListener()を使って作っています。
    ポイントは

    //サイドバーがクリックされたら、マーカーを擬似クリック
    google.maps.event.addDomListener(li, "click", function(){
    	google.maps.event.trigger(marker, "click");
    });
    
    の部分です。
    <li>がクリックされた時、markerにgoogle.maps.event.trigger()を使ってclickイベントを発生させることで、 サイドバーをクリックすると、マーカーがクリックされたのと同じように動作させることができます。



    Code

    <script type='text/javascript'>
    
    var stationList = [
      {"latlng":[35.681382,139.766084],name:"東京駅"},
      {"latlng":[35.630152,139.74044],name:"品川駅"},
      {"latlng":[35.507456,139.617585],name:"新横浜駅"},
      {"latlng":[35.25642,139.154904],name:"小田原駅"},
      {"latlng":[35.103217,139.07776],name:"熱海駅"},
      {"latlng":[35.127152,138.910627],name:"三島駅"},
      {"latlng":[35.142015,138.663382],name:"新富士駅"},
      {"latlng":[34.97171,138.38884],name:"静岡駅"},
      {"latlng":[34.769758,138.014928],name:"掛川駅"},
      {"latlng":[34.703741,137.734442],name:"浜松駅"},
      {"latlng":[34.762811,137.381651],name:"豊橋駅"},
      {"latlng":[34.96897,137.060662],name:"三河安城駅"},
      {"latlng":[35.170694,136.881637],name:"名古屋駅"},
      {"latlng":[35.315705,136.685593],name:"岐阜羽島駅"},
      {"latlng":[35.314188,136.290488],name:"米原駅"},
      {"latlng":[34.985458,135.757755],name:"京都駅"},
      {"latlng":[34.73348,135.500109],name:"新大阪駅"}
    ];
    var infoWnd, mapCanvas;
    function initialize() {
      //地図を表示
      var mapDiv = document.getElementById("map_canvas");
      mapCanvas = new google.maps.Map(mapDiv);
      mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      
      //情報ウィンドウの作成
      infoWnd = new google.maps.InfoWindow();
      
      //地図上にマーカーを配置していく
      var bounds = new google.maps.LatLngBounds();
      var station, i, latlng;
      for (i in stationList) {
        //マーカーを作成
        station = stationList[i];
        latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
        bounds.extend(latlng);
        var marker = createMarker(
          mapCanvas, latlng, station.name
        );
        
        //サイドバーのボタンを作成
        createMarkerButton(marker);
      }
      //マーカーが全て収まるように地図の中心とズームを調整して表示
      mapCanvas.fitBounds(bounds);
    }
    function createMarker(map, latlng, title) {
      //マーカーを作成
      var marker = new google.maps.Marker({
        position : latlng,
        map : map,
        title : title
      });
      
      //マーカーがクリックされたら、情報ウィンドウを表示
      google.maps.event.addListener(marker, "click", function(){
        infoWnd.setContent("<strong>" + title + "</title>");
        infoWnd.open(map, marker);
      });
      return marker;
    }
    function createMarkerButton(marker) {
      //サイドバーにマーカ一覧を作る
      var ul = document.getElementById("marker_list");
      var li = document.createElement("li");
      var title = marker.getTitle();
      li.innerHTML = title;
      ul.appendChild(li);
      
      //サイドバーがクリックされたら、マーカーを擬似クリック
      google.maps.event.addDomListener(li, "click", function(){
        google.maps.event.trigger(marker, "click");
      });
    }
    google.maps.event.addDomListener(window, "load", initialize);
    	</script>

    サイト内検索
    Google Maps APIプログラミング入門 第2版
    Google Maps APIプログラミング入門 第2版
    全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
    詳しくはこちら
    Google Maps APIプログラミングガイド

    Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
    詳しくはこちら