人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

詳しく言うと
Youtubeのある特定のキーワードをGoogleMapに表示をしてピンをうって、ピンをクリックするとフキダシが表示されてYoutubeを表示したいのですができそうでできずにモヤモヤしてます。

var List = [{"latlng":[35.03937,135.72924],name:"金閣寺"},
{"latlng":[35.0270213,135.7982058],name:"銀閣寺"}];

という配列から金閣寺、銀閣寺のyoutube動画をgooglemap上の金閣、銀閣の上にアイコンつくり、吹き出しに動画埋め込み、ということがしたいです。


●質問者: syouya1135
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy
ベストアンサー

YouTube動画を情報吹き出し(インフォウインドウ)に表示する | WordPressにGoogle Maps API V3!
やってる人はいるみたいですが、どの部分でできないですか?


syouya1135さんのコメント
回答ありがとうございます。 紹介いただいたURLはYOUTUBEの埋め込みコードからやっているのですが自分はAPIつかってやりたいと思っています! そのAPIの部分でつまづいてしまってます。 http://gdata.youtube.com/feeds/api/videos?lr=ja&vq="+キーワード]+"&max-results=1&alt=json-in-script とやってそのあとがわかりません。 http://q.hatena.ne.jp/1336747487 これのキーワード版と思って頂ければ!

Lhankor_Mhyさんのコメント
[https://developers.google.com/youtube/player_parameters?hl=ja:title] ↑に従えばできそうですよ。 【コールバックの引数】.feed.entry.media$group.media$content.url ↑これで埋め込み用のURLも取れそうなんですが、どのあたりで引っ掛かってますか?

syouya1135さんのコメント
varurl =http://gdata.youtube.com/feeds/api/videos?lr=ja&vq="+ loc.name +"&max-results=1&alt=json-in-script"; とやった場合のコールバック関数というのは url.feed.entry.media$group.media$content.urlで正しいですか? コールバック関数といったものをよく理解していなくてすいません。 ただこの場合はうまく動きません(>_<)

Lhankor_Mhyさんのコメント
違いますよ。 質問者のお書きになったJSONPリクエスト部分のコードを見せていただければアドバイスしやすいのですけれど難しいのでしょうか?

syouya1135さんのコメント
<script type='text/javascript'> var List = [ {"latlng":[35.03937,135.72924],name:"金閣寺"}, {"latlng":[35.0270213,135.7982058],name:"銀閣寺"} ]; function initialize(){ //地図表示 var mapDiv = document.getElementById("map_canvas"); var mapCanvas = new google.maps.Map(mapDiv); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); //マーカーを表示・非表示する mapCanvas.set("markersVisible", true); var checkBox = document.getElementById("marker_visible"); google.maps.event.addDomListener(checkBox, "click", function(){ mapCanvas.set("markersVisible", Boolean(checkBox.checked)); });

syouya1135さんのコメント
var List = [ {"latlng":[35.03937,135.72924],name:"金閣寺"}, {"latlng":[35.0270213,135.7982058],name:"銀閣寺"} ]; function initialize(){ //地図表示 var mapDiv = document.getElementById("map_canvas"); var mapCanvas = new google.maps.Map(mapDiv); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); //マーカーを表示・非表示する mapCanvas.set("markersVisible", true); var checkBox = document.getElementById("marker_visible"); google.maps.event.addDomListener(checkBox, "click", function(){ mapCanvas.set("markersVisible", Boolean(checkBox.checked)); });

syouya1135さんのコメント
//地図上にマーカ配置 var bounds = new google.maps.LatLngBounds(); var loc; var i; var lat; for(i in List){ //マーカー作成 loc = List[i]; latlng = new google.maps.LatLng(loc.latlng[0], loc.latlng[1]); var url="http://gdata.youtube.com/feeds/api/videos?lr=ja&vq="+ loc.name +"&max-results=1&alt=json-in-script"; var videoId = url.feed.entry.media$group.media$content.url; bounds.extend(latlng); var marker = createMarker( mapCanvas, latlng, loc.name ); createMarkerButton(marker); } mapCanvas.fitBounds(bounds); } function createMarker(map, latlng, title, videoId){ //マーカー作成 var marker = new google.maps.Marker({ position:latlng, map:map, title:title }); //情報ウィンドウ var infoWnd = new google.maps.InfoWindow({ content: '<iframe width="560" height="315" src="'+ videoId +'" frameborder="0" allowfullscreen></iframe>' });

syouya1135さんのコメント
必要な部分はこれくらいかと。 http://techblog.yahoo.co.jp/javascript/jsonpjavascript/ これを参考にしているのですが初心者の私には理解できそうでできなくてもどかしいです(-_-;)

Lhankor_Mhyさんのコメント
うーん、これは、なかなか正解から遠いですよ。どうしようかな。

Lhankor_Mhyさんのコメント
JSOPを叩いてYouTubeを表示するサンプル書きました。頑張って下さいまし。 http://jsfiddle.net/HjhnF/
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ