参照：InfoBox: google-maps-utility-library-v3
InfoBoxで情報ウィンドウをカスタマイズしてみました。マーカークリックで、情報ウィンドウを開閉できます。情報ウィンドウ内にはYouTube動画を埋め込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<style>
#map_canvas { width:100%; height:100%; margin:0; padding:0; }
.infowin {
background:#000;
color:#fff;
padding:5px;
margin-bottom:20%;
margin-top:5px;
}
.infowin iframe {
display:block;
margin:0 auto; padding:0;
box-sizing:border-box;
}
.infowin p {
margin:5px; padding:0;
}
</style>
<!-- Google Maps APIの読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="/content/lib/gmapv3/infobox.js"></script>
<script>
var map;
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize();
});
var openFlag=new Array();
var overlays=new Array();
/* 地図の初期化 */
function initialize() {
/* 緯度・経度：スカイツリー */
var point=new google.maps.LatLng(35.710139,139.810833);
/* 地図のオプション設定 */
var mapOptions={
/*初期のズーム レベル */
zoom:12,
/* 地図の中心点 */
center:point,
/* 地図タイプ */
mapTypeId:google.maps.MapTypeId.ROADMAP,
styles:[{elementType:'all'}]
};
/* 地図オブジェクト */
map=new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
/* マーカー画像 */
var image=new google.maps.MarkerImage("/content/img/ajax/gmapv3/infowindow/marker_skytree.png",
new google.maps.Size(44.0, 200.0),
new google.maps.Point(0, 0),
new google.maps.Point(22.0, 100.0)
);
/* マーカーの影画像 */
var shadow=new google.maps.MarkerImage("/content/img/ajax/gmapv3/infowindow/marker_skytree_shadow.png",
new google.maps.Size(145.0, 200.0),
new google.maps.Point(0, 0),
new google.maps.Point(22.0, 100.0)
);
/* マーカー */
var marker=new google.maps.Marker({
position: point,
map: map,
title:"とうきょうスカイツリー",
icon:image,
shadow:shadow
});
var s="";
s+='<iframe width="560" height="315" src="https://www.youtube.com/embed/xMLJf_YqRCU?rel=0&autohide=1" frameborder="0" allowfullscreen></iframe>';
s+="<p>節電中とかで前半分だけのライトアップ。夜空にそびえたつ白い巨塔はとっても幻想的でした。</p>";
s+="<p><a href='https://www.youtube.com/watch?v=xMLJf_YqRCU' class='button' target='_blank'>この動画をYouTubeで見る(href)</a></p>";
s+="<p><a href='#' class='button' target='_blank' id='btn' rel='xMLJf_YqRCU'>この動画をYouTubeで見る(on)</a></p>";
var infoWindowWidth=570; /* 情報ウィンドウの幅 */
var myOptions={
content:"<div class='infowin'>"+s+"</div>",
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-(infoWindowWidth/2), 100),
zIndex: null,
boxStyle: {
background: "url('/content/img/ajax/gmapv3/tipbox.gif') no-repeat center top",
opacity: 0.95, /* 情報ウィンドウの透明度 */
width:infoWindowWidth+"px"
},
closeBoxMargin: "5px 0 0 0",
closeBoxURL:"/content/img/ajax/gmapv3/close.gif",
infoBoxClearance: new google.maps.Size(1,1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var infowindow=new InfoBox(myOptions);
infowindow.open(map, marker);
marker.set("id", 0);
infowindow.set("id", 0);
overlays.push([marker, infowindow]);
openFlag[0]=1;
/* マーカークリックで情報ウィンドウトグル */
google.maps.event.addListener(marker, 'click', function(e){
var id=this.get("id");
var infowindow=overlays[id][1];
if(openFlag[id]==0){
infowindow.open(map, this);
openFlag[id]=1;
}else{
infowindow.close();
openFlag[id]=0;
}
});
/* 閉じるボタンを押した時 */
google.maps.event.addListener(infowindow, 'closeclick', function() {
var id=this.get("id");
openFlag[id]=0;
});
$("#map_canvas").on("click", "a", function(event){
if($(this).attr("id")=="btn"){
$(this).attr('href',"https://www.youtube.com/watch?v="+$(this).attr("rel"));
}else{
return false;
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h3>情報ウィンドウのカスタマイズ</h3>
<p>参照：<a href='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/'>InfoBox: google-maps-utility-library-v3</a></p>
<p>素材：<a href='http://kage-design.com/wp/?p=687'>東京の新名所 東京スカイツリーのシルエット素材</a></p>
<p>InfoBoxで情報ウィンドウをカスタマイズしてみました。マーカークリックで、情報ウィンドウを開閉できます。情報ウィンドウ内にはYouTube動画を埋め込んでいます。</p>
<!-- 地図の埋め込み表示 -->
<div id="map_canvas"></div>
</body>
</html>