GoogleMapsとYoutubeのAPIで地図と動画を連動させてみた。

Google Maps APIとYoutube APIの勉強ついでにちょっとしたサイトを作ってみました。
地図上の情報ウィンドウをクリックすると、その場所に関連のある音楽が流れます。実験用なので投稿機能などは実装していません。

Place Song - あの場所で、あの歌を。
http://placesong.nobody.jp/

【この記事の目的】
・自分用にメモ。
・読んだ人に改善アイデアをいただきたい。

【アウトライン】
・手順：作成過程など。
・課題：改善点など。


【手順１ - Bootstrap】

・公式サイトから一式をダウンロード。
・ファイル内にIndex.htmlを作成。
・適当にヘッダーを作る。
・公式サイトのサンプルを参考に、#wrapでフッターを下に押しやる。

・楽曲の一覧が欲しいので、amazonから画像を引用してフッターに並べる。
・このとき、ついでに音楽と所縁のある場所をぐぐっておく。

・ブラウザを狭めるとカオスになるのでレスポンシブ用にGridを指定。
・地図と動画の配置をいい感じにしたいので、メイン部分もGrid指定。

※基本的にドットインストールを見ながらやればOK。
※フッターの下部固定は公式サイトのexample > sticky footerを参考に。
※テキストベースなら以下の記事が参考になった。Grid以外はこれだけで十分かも。
http://taro-tnk.hatenablog.com/entry/2012/12/27/002518


【手順２ - Google Maps】

・APIのurlを読み込ませる。
・メインコンテンツの左側に、div#mapを配置。
・div#mapのすぐ下にjavascriptを記述して地図を表示させる。
・stylesheetでサイズの調整など。
・地図のオプションを適当に変える。

・音楽と関係する地点にマーカーを配置する。
・マーカーをクリックしたら情報ウィンドウが表示されるようにする。
・表示内容は地名で統一。<a>桜木町</a>みたいな感じで囲っておく。

※導入についてはドットインストールを見ればOK。というか基礎知識を得るため。
※DOCTYPE!宣言と地図のheight, widthを％表示は両立できないので、前者をカット。

※マーカーと情報ウィンドウの複数処理は以下の記事が参考になった。というか全体的にこれをほぼそのまま使わせていただいた。
http://www.nanchatte.com/map/showDifferentInfoWindowOnEachMarker.html

※座標はググれば見つかる。それこそAPIを使ってgeocodingから求めても良い。駅などの主要施設だったら以下のサイトですぐ分かる。
http://www.geocoding.jp/


【手順３ - Youtube API】

・Player APIのurlを読み込ませる。
・メインコンテンツの右側にdiv#playerを配置。
・div#playerのすぐ下に function onYouTubePlayerAPIReady() を記述して再生プレイヤーを表示させる。
・stylesheetでサイズの調整など。

・地図を表示するjavascriptをいじって、地名クリックで動画を再生させる。
・動画再生は、player.loadVideoById(videoId)なので、<a onClick="xxx">桜木町</a>のxxx部分に加える。
・video Idがyyyだったら(¥'yyy¥')と記述すれば良い。シングルクォーテーションの読み込みを正しくさせるために¥を付けておく。

※ドットインストール「youtubeジュークボックス作成」を参考に。
※videoのIdは、youtubeで動画のページを開いたときのurlの「watch?v=」以降の英数字。


→これで完成。index.html＋Bootstrapのデフォルトファイルだけを利用した、html+css+javascript によるざっくり実装。勉強しながらだったので所要時間は半日。


【課題】
この記事を読んでくださった方々に、ぜひご助言いただきたいです。
特に以下の点は課題が残っている気がする。

＜技術＞
・Google Mapsの表示を中心に、コードがカオスなので改善したい。
・情報ウィンドウはもっといじったら面白いことができそう。

＜内容＞
・閲覧側に対してどんな価値を与えたら見てもらえるか。ノーアイデア。
・というか、サイトが何のストーリーも持っていないからな…。
・地図だけ見てもあまりわくわくしない。観光雑誌みたく写真を組み合わせるとまた違うのかなぁ。ストリートビューだと負荷がえらいことになるし、悩む。


そもそも今回２つのAPIを勉強したのは「非営利団体の活動地を紹介して、活動内容を動画で見ることができる→寄付に繋げる」ようなサイトはどうだろうか？…的な雑談があったから。そこから具体的なストーリーに落とし込めば良いかな。投稿する側は認知拡大のためで良いとして、地図→動画ってだけじゃ誰も閲覧しないですよねぇ。

あるいは、ゲーム的な視点があっても良いかもしれない。Google Mapsで中南米の遺跡を探検しながらフォルクオーレが流れるとか、スティールボールランの走路を辿りながらスタンドの由来になった洋楽が流れるとか。んー、アイデアが出てきそうで出てこないっす。

こんなんあったら素敵やん？みたいなのがあれば、ぜひ教えていただきたいです。
おわり。