スポンサードリンク

YouTube動画を情報吹き出し(インフォウインドウ)に表示する

◆ Google Maps API v3 / Youtube動画を吹き出し(インフォウインドウ)に表示する

Youtubeの動画をインフォウィンドウ(infowindow)に表示させてみます。

1.先ずYouTubeにアクセス

YouTubeサイト

2.YouTube動画の下部にある埋め込みコードをコピペして

3.infowindowの吹き出しコンテンツに貼り付けます。

var contentString =  ‘<div ><iframe ・・・・・・・・・・・・・・・・・・・・・・・・・lowFullScreen></iframe></div>';
divのstyle指定は不要です。インフォウィンドウが適当な大きさにあわせられます。

4.Scriptのフルコードは次の通り

<script type="text/javascript">
function initialize()
{

var myLatlng = new google.maps.LatLng(35.71515, 139.39008);
    var myOptions =
    {
    zoom: 17,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP //地図種類指定
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//-----------インフォウィンドウ-------------

    var contentString =  '<div ><iframe title="YouTube video player" class="youtube-player" type="text/html" width="425" height="349" src="http://www.youtube.com/embed/lCewMOr4vI8?rel=0" frameborder="0" allowFullScreen></iframe></div>';
    var infowindow = new google.maps.InfoWindow(
    {
    position: myLatlng,  //★追加★インフォウィンドウを最初に表示させる位置を指定
    content: contentString
    });
     infowindow.open(map); //★追加★インフォウィンドウを開く

//-----------マーカ-------------

	var icon = new google.maps.MarkerImage( //アイコン画像指定
	'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
	new google.maps.Size(34,34),
	new google.maps.Point(0,0),
	new google.maps.Point(37,34)
	);

	var shadow = new google.maps.MarkerImage( //アイコン影画像指定
	'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
	new google.maps.Size(34,34),
	new google.maps.Point(0,0),
	new google.maps.Point(37,34)
	);

	var marker = new google.maps.Marker(
	{
	draggable: true,  //アイコンの移動の有効無効
	raiseOnDrag: false,//アイコンのドロップ
	icon: icon,
	shadow: shadow,
	title: 'フワフワドーム昭和記念公園',  //タイトル位置
	//shape: shape,
	map: map,
	position: myLatlng //マーカ位置
});

//-----------インフォウィンドウ呼び出し-------------
    google.maps.event.addListener(marker, 'click', function()
    {
    infowindow.open(map,marker);
    });

}
  window.onload=initialize;
</script>

◆ 問題点

実は動作を確認していたところ、Chromeで、インフォウィンドウの映像が半分に途切れたように表示されてしまうことに気がついた。I.E、FireFoxでは問題なし。

地図のマップタイプを切り替えると表示されるのですが・・・・

似たような問題がGoogleグループを覗いていたらありました。マップ移動時に画像がついてこない問題もあるようで、解決したと言っているソースを見ているとイベントリスナーのcenter-changedのコードを追加したようだ。

・・・・・・本日は時間が無いのでここまで、後日の宿題。

本問題のメモリンク

◆ Google Maps API v3 YouTube動画を情報吹き出し(インフォウインドウ)に表示するデモ

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">