詳しく書きますと、
Youtubeのある特定のアカウントが投稿した動画1つ1つに設定された地図位置情報を、GoogleMapに表示をしてピンをうって、ピンをクリックするとフキダシが表示されてYoutubeを表示。
そのGoogleMapをサイトに埋め込み表示させたいと思っています。
Youtube,MapsのAPIがわからず実装できませんでした。
コードなど書いて頂けたら大変助かります。
https://gist.github.com/2662145
demo: http://jsfiddle.net/gh/gist/jquery/1.6.4/2662145/
chromeだけ吹出しのyoutubeの上部に変なスペースができてしまう問題があります。
まず、複数の 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 ノードの直下の以下の二つのノード。
ありがとうございます。
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表示
という指示を書くべきだと思っています。
コードの書き方など教えていただけると大変助かります。お手数かけます、、。
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 });
https://gist.github.com/2662145
demo: http://jsfiddle.net/gh/gist/jquery/1.6.4/2662145/
chromeだけ吹出しのyoutubeの上部に変なスペースができてしまう問題があります。
ありがとうございます!まさに!
おかげで実装ができそうです!
大変助かりました!
ありがとうございます!まさに!
2012/05/12 12:55:43おかげで実装ができそうです!
大変助かりました!