Google Maps の地図上で、アイコン（マーカー）をマウスクリックするとYoutube 動画を吹き出し（インフォウインドウ）に表示するサンプルです。
◆HTMLサンプル
<body onload=”load();” onunload=”GUnload();“>
<div id=”map100″>Loading…</div>
◆Scriptサンプル
<script type=”text/javascript”>// <![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map100 = new GMap2(document.getElementById(“map100″));
map100.addControl(new GSmallMapControl());
map100.addControl(new GMapTypeControl());
map100.setCenter(new GLatLng(35.71515, 139.39008), 17, G_SATELLITE_MAP);
var marker = new GMarker(map100.getCenter());
marker.bindInfoWindow(‘
<div style=”width:450; height: 400;”><span width=”425″ height=”355″>
<span name=”movie” </param></span>
<span name=”wmode” value=”transparent”></span></param><span src=”http://www.youtube.com/v/lCewMOr4vI8&hl=ja&fs=1″ type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></span></span></div>
‘);
map100.addOverlay(marker);
}
}
// ]]></script>
◆サンプルマップ（地図）
関連記事一覧
YouTube動画を情報吹き出し（インフォウインドウ）に表示する
インフォウィンドウのサイズの大きさを指定変更する方法
始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ（infowindow）を最初から表示する。
イベントリスナー’dragstart’で、地図をドラッグしたらマーカーのインフォウィンドウ（吹き出し）を閉じて削除する。
マーカーのインフォウィンドウ（吹き出し）を地図の中心座標に表示させるpanTo（）メソッドを使ったサンプル
XMLファイル（配列）の複数マーカーから特定markerのインフォウィンドウ（infowindow）を最初から一つだけ表示するサンプルデモ完成
インフォウィンドウ（吹き出し）の外部サイトへのリンクURLの記述／iPhoneサイトをjQTouchで作成する。
マーカー（アイコン）の種類を変更する／Google Maps API
スポンサードリンク
Leave a Comment