WordPressにGoogle Maps API V3！

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

1.先ずYouTubeにアクセス

YouTubeサイト

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

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

var contentString =  ‘<div ><iframe ･･････････・・・・・・・・・・・・・・・lowFullScreen></iframe></div>';

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のコードを追加したようだ。

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

本問題のメモリンク

• http://slide-rules.co.uk/ICC/boris_again/
• http://stackoverflow.com/questions/3694242/youtube-video-in-a-google-map-info-window
• http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ccaaee32b89e3656/c87bb19e4662bd78#c87bb19e4662bd78
• http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/fd5d35c9f4178736
• http://www.pineapple.la/map.html

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

• Youtube動画を吹き出し（インフォウインドウ）に表示するサンプル

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク