Youtubeのあるユーザーの動画をGoogleMap上に表示し、そのMapをサイトに表示させたいと思っています。


詳しく書きますと、
Youtubeのある特定のアカウントが投稿した動画1つ1つに設定された地図位置情報を、GoogleMapに表示をしてピンをうって、ピンをクリックするとフキダシが表示されてYoutubeを表示。
そのGoogleMapをサイトに埋め込み表示させたいと思っています。

Youtube,MapsのAPIがわからず実装できませんでした。
コードなど書いて頂けたら大変助かります。

回答の条件
  • 1人50回まで
  • 登録:2012/05/11 23:44:47
  • 終了:2012/05/12 13:01:15

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/05/12 05:08:30

ポイント990pt

https://gist.github.com/2662145
demo: http://jsfiddle.net/gh/gist/jquery/1.6.4/2662145/

  1. youtube apiをscript要素から叩く。authorパラメータでアカウントを指定。jsonpでinit関数実行。
  2. youtube apiの結果を得てから地図初期化。


chromeだけ吹出しのyoutubeの上部に変なスペースができてしまう問題があります。

参考
id:vbnvbn123

ありがとうございます!まさに!
おかげで実装ができそうです!
大変助かりました!

2012/05/12 12:55:43

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4562ベストアンサー獲得回数19072012/05/12 00:48:45

ポイント10pt

まず、複数の Marker を作るサンプル。
http://waox.main.jp/news/?p=2238

デモは、こちら。
http://waox.main.jp/news/maps/v3/example/array_marker1.html

ソース中の、23行目からの配列で、'公園1' とかが InfoWindow の内容に表示されることを覚えておきます。


で、InfoWindow の中に、YouTube の動画を表示するサンプルがこちら。
http://waox.main.jp/news/?p=2187

デモは、こちら。
http://waox.main.jp/news/maps/v3/example/map-info7.html

25行目で InfoWindow#open メソッドを呼んでいるので、最初から吹き出しが表示されていますが、18行目の contentString に YouTube の埋め込みコードの <iframe> の内容が書かれていることに着目。


最初の複数の Marker を作るサンプルで、23行目で定義している配列の、最初の要素を、YouTube の埋め込みコードを含むような HTML の断片にすれば、動画を表示する複数の Marker が配置できると思います。



追記です。

Youtubeユーザーの更新毎に自動でMapsに反映されるようにはできないでしょうか。

Youtube の埋め込みコードの部分は、ID の部分をどうするか、ってことになります。
そちらは、YouTube API を使って検索します。
検索結果から、埋め込みコードの該当部分を作ります。

Google Maps API が javascript なので、JSON インターフェースの API を使うことになると思います。


https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
検索は、上記の author パラメータで、Youtube ユーザの ID を指定します。

返ってくる結果は、こちらを参考。
https://developers.google.com/youtube/2.0/developers_guide_protocol_video_entries
https://developers.google.com/youtube/2.0/developers_guide_protocol_understanding_video_feeds#Understanding_Video_Entries

中身を読む前に、Youtube API の JSON インターフェースを使うプログラムのコードがこちら。
http://blog.kazuhiroshibuya.com/archives/51446267.html

entry というところのデータをループで取り出しているところに着目。
で、XML でのレスポンスのデータを再確認。

多分、抽出しなきゃいけないのは、entry ノードの直下の以下の二つのノード。

  • link の href 属性
  • gml:Point の gml:pos のテキスト
他2件のコメントを見る
id:vbnvbn123

ありがとうございます。

1,YotubeユーザーIDから<gml:pos>経度緯度が含まれるRSSやJSONを表示させることはできました。
例えば
http://gdata.youtube.com/feeds/api/users/SQUASHfilms/uploads?alt=rss&q=
http://gdata.youtube.com/feeds/api/users/SQUASHfilms/uploads?alt=json&q=

2,GoogleMapsのXMLからピンを表示させる方法もわかりました。
http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/

ただ、1,の<gml:pos>経度緯度を
2,のGoogleMapに反映させる方法がわかりませんでした、、。

もし<gml:pos>のフィールドがある場合、
・マップにピン
・フキダシにYoutube表示
という指示を書くべきだと思っています。

コードの書き方など教えていただけると大変助かります。お手数かけます、、。

2012/05/12 04:06:21
id:a-kuma3

google.maps.LatLng のインスタンスを作って、google.maps.Marker を作るときの position に指定します。
http://waox.main.jp/news/?p=2238 から抜粋すると、

    var markers = [
    ['公園1', 35.760191,140.061629,'kouen'],
        ...
    var latlng = new google.maps.LatLng(marker[1], marker[2]);
        ...
    var marker = new google.maps.Marker(
    {
    map: map,
    position: latlng,        // ★
    icon: icon.icon,
    shadow: icon.shadow,
    title: name
    });
2012/05/12 10:02:30
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/05/12 05:08:30ここでベストアンサー

ポイント990pt

https://gist.github.com/2662145
demo: http://jsfiddle.net/gh/gist/jquery/1.6.4/2662145/

  1. youtube apiをscript要素から叩く。authorパラメータでアカウントを指定。jsonpでinit関数実行。
  2. youtube apiの結果を得てから地図初期化。


chromeだけ吹出しのyoutubeの上部に変なスペースができてしまう問題があります。

参考
id:vbnvbn123

ありがとうございます!まさに!
おかげで実装ができそうです!
大変助かりました!

2012/05/12 12:55:43

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません