【備忘録】Google Fusion Tablesを利用したGoogle Map上のYouTube連携（触りの部分のみ）

先日参加した、Google Top Contributor Program Meetups Tokyo 2014にて、Google Fusion Tablesを使っていろいろやっている方とお会いしました。その後のコミュニケーションで、件名のようなことが出来るということだったので興味を持ち、我流でごにょごにょとやっていたら、何か形になってきたのでメモしておきます。

SQLでの検索に対応しているようですが、まだそのあたりは分からないので、あくまで手入力レベルで試したさわりの部分のみです。なので素人レベルです。他に方法はあるかもしれませんが、何かのきっかけに役立てればと思います。

目標

Google Fusion Tablesを利用して、Google Map上の各ポイント詳細に

1. YouTube動画を埋め込む
2. リンクを追加

をやってみましょう。
今回は検索システム等は使ってません（というかまだ使い方まで分かってない）

準備

1. 公開されたYouTube動画を用意（著作権などもあるので、自前で用意するとよいでしょう）
   　今回ロケールも入れてみるので、職場の公開された所長メッセージ動画を使ってみます。
   ※YouTubeのコード名（https://www.youtube.com/watch?v=コード名）を調べておきます。今回は、https://www.youtube.com/watch?v=YUHTzicMIxc のため、「YUHTzicMIxc」がコード名となります。
2. ロケール情報を準備
   　緯度経度の数値か、住所か場所名（Google Mapで検索できること）を用意しましょう。

Step 1. Googleドライブにて、「Google Fusion Tables」を有効にする

1. Googleドライブにアクセスします。
2. 新規→その他→アプリを追加 を選択（初回のみ）
3. Fusion Tablesを見つけて、「接続」ボタンをクリック
   

これで今後、新規→その他→「Google Fusion Tables」から作成可能になります。

Step 2. Fusion Tablesを作成する

1. Googleドライブにアクセスします。
2. 新規→その他→「Google Fusion Tables」
3. Create empty tableを選択

※今回は簡易データなので、空テーブルを作成します。

Step 3. YouTubeコードとリンクの項目追加

  　

1. Edit→Add columnを選択（２度）
2. Name: Links
   Format: Link
   
   Name: YouTube code
   Format: None
3. として「Save」ボタンで保存

Step 4. 項目名の変更

1. 各項目の右の▼をクリックして「Change」を選択
2. Name: Title と変更（ここでは仮に）

Step 5. データの入力

1. 項目の次の行（空行）をダブルクリックすると入力画面が出てきます。
2. Title: タイトルです
   Number: 整理番号なので適当に
   Location: 緯度経度の数値か、住所か場所名（Google Mapで検索できること）を入れて下さい。
   Date: 日時ですね
   Links: 関連するリンク
   YouTube Code: YouTubeのコード名（https://www.youtube.com/watch?v=コード名）を入れる。
3. 入れ終わってSaveボタンを押すと、レコードが１件はいったはずです。
   
   ※データについては、Cardsタブでも見ることができます。

Step 6. Google Mapのポイントマーカー変更

1. Map of Locationのタブを開いてください。
2. 左サイドメニューの「Change feature styles」をクリック
3. PointsのMaker iconをデカイのに変更しちゃいましょう（デフォルトのは見づらい）
   

この段階では、Google Mapのデータは下記のようになります。

Step 7. Google Mapのポイントデータテンプレート編集

ようやくここで本番です。

1. Map of Locationのタブを開いてください。
2. 左サイドメニューの「Change info window」をクリック
3. 上部の「Custom」をクリック
4. <b>YouTube Code:</b> {YouTube Code} の部分を下記に変更します。
   ※widthは幅、heightは縦です。適宜調整してください。
   <b><iframe width="320" height="240" src="//www.youtube.com/embed/{YouTube Code}" frameborder="0" allowfullscreen></iframe></b>
   

これでSave（保存）してポイントを見てみると、



おお〜、動画が埋め込まれてますよね！！
という感じになります。

あとこれをどう使うかはあなた次第です。
興味があればトライしてみてはどうでしょう。

2014年9月26日　木谷