FusionTablesLayerで使えるサイドバー

Fusion Table



Code

<script type='text/javascript'>

      var mapCanvas, layer, infoWnd;
      var ftTableId = "1fLFHL3QzEauLeuuN0aRAeuEVRNpMVC5y1Y-j8w";
      
      function init_map() {
        /*
         * (2)地図の初期化
         */
        var mapDiv = document.getElementById("map_canvas");
        mapCanvas = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        
        // (2) FusionTablesLayerをクリックした時に表示される情報ウィンドウの代わりに表示する情報ウィンドウを作成
        infoWnd = new google.maps.InfoWindow();
        
        // (3) Fusion Tables Layerの作成
        layer = new google.maps.FusionTablesLayer({
          query : {
            select : "latitude",
            from : ftTableId
          },
          map : mapCanvas,
          
          //このパラメータを指定するのが重要
          suppressInfoWindows : true
        });
        
        // (7)レイヤーがクリックされたら、情報ウィンドウを表示する
        google.maps.event.addListener(layer, "click", function(evt) {
          openInfoWindow(evt);
        });
        
        
        /*
         * (4)google-javascript-apis-libraryを使って、FusionTablesからデータを読み込む
         * https://developers.google.com/fusiontables/
         */
        var request = gapi.client.fusiontables.query.sqlGet({
          'sql': 'select * from ' + ftTableId
        });
        
        /*
         * (5)結果を解析して、FusionTablesMouseEventを作成する
         * https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesMouseEvent
         */
        request.execute(function(response) {
          var bounds = new google.maps.LatLngBounds();
          var pixelOffset = new google.maps.Size(0, -16, "px", "px");
          
          var j, columnName, latLng;
          for (var i in response.rows) {
            var row = {};
            for (j = 0; j < response.columns.length; j++) {
              columnName = response.columns[j];
              row[columnName] = {
                "columnName" : columnName,
                "value" : response.rows[i][j]
              };
            }
            ftMouseEvt = {
              row : row,
              pixelOffset : pixelOffset,
              latLng : new google.maps.LatLng(row.latitude.value, row.longtiude.value)
            };
            addListItem(ftMouseEvt);
            
            bounds.extend(ftMouseEvt.latLng);
          }
          
          // 地図を表示する
          mapCanvas.fitBounds(bounds);
        });
      }
      
      /*
       * (6)リストのアイテムを作成し、リストに追加する
       */
      function addListItem(info) {
        //リストアイテムの作成
        var btn = document.createElement("div");
        btn.setAttribute("class", "listItem");
        btn.innerHTML = info.row.station.value;
        
        //リストに追加
        var list = document.getElementById("list");
        list.appendChild(btn);
        
        //ボタンをクリックしたら、情報ウィンドウを開く
        google.maps.event.addDomListener(btn, "click", function() {
          openInfoWindow(info);
        });
      }
      
      /*
       * 情報ウィンドウを表示する
       */
      function openInfoWindow(ftMouseEvt) {
        var html = [];
        html.push("<table class='ftTable'>");
        for (var field in ftMouseEvt.row) {
          html.push("<tr><th>" + field + "</th><td>" + ftMouseEvt.row[field].value + "</td></tr>");
        }
        html.push("</table>");
        infoWnd.setOptions({
          content : html.join(""),
          position : ftMouseEvt.latLng,
          pixelOffset : ftMouseEvt.pixelOffset
        });
        infoWnd.open(mapCanvas);
      }
      
      
      /*
       * (1)google-api-javascript-clientの初期化
       */
      function init_api_client() {
        gapi.client.setApiKey('AIzaSyDxSkKsMgiZTaiDTyswwiy5vQElYeOe_Ac');
        gapi.client.load('fusiontables', 'v1', init_map);
      }
    </script>
<script type='text/javascript'>
</script>
    <script type="text/javascript" src="./common_maps_code.js"></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の使い方も掲載。
詳しくはこちら