<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
if(GBrowserIsCompatible()){
/* 地図インスタンス生成 */
map=new GMap2(document.getElementById("map"));
/* ピクセル座標 */
var latlng=new GLatLng(36.204824,138.252924);
/* 中心地点 */
map.setCenter(latlng, 2);
/* コントロール追加 */
map.addControl(new GLargeMapControl()); /* コントロール大 */
map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
/* マーカー追加 */
marker=new GMarker(latlng);
map.addOverlay(marker);
}
}
function fOpenInfoWindow(){
var opts={
maxWidth:200
};
var obj=document.createTextNode("ここが「日本」です。");
marker.openInfoWindow(obj,opts);
}
function fOpenInfoWindowHtml(){
var opts={
maxWidth:200
};
marker.openInfoWindow("ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>(日本)です。",opts);
}
function fOpenInfoWindowTabs(){
var tObj1=document.createTextNode("ここが「日本」です。国土面積は「377,835km2」です。");
var tObj2=document.createTextNode("日本の首都は「東京」です。東京土産は「銘菓ひよ子」が有名。");
var tObj3=document.createTextNode("日本の人口は「約1億2780万人」です。その内訳は、男性≒6230万人/女性≒6546万人。女性の人口の方が多いです。");
var tabs = [
new GInfoWindowTab("場所", tObj1),
new GInfoWindowTab("首都", tObj2),
new GInfoWindowTab("人口", tObj3)
];
var opts={
maxWidth:300,
selectedTab:1
};
/* タブ付き情報ウィンドウ表示(内容はDOMノード) */
marker.openInfoWindowTabs(tabs,opts);
}
function fOpenInfoWindowTabsHtml(){
var opts={
maxWidth:300,
selectedTab:1
};
var tabs = [
new GInfoWindowTab("場所", "ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>(日本)です"),
new GInfoWindowTab("首都", "日本の首都は<strong>「東京」</strong>です。<br>東京土産と言えば...<img src='/content/img/ajax/googlemap/chick.gif' alt='ひよこ' style='vertical-align:middle;' /><a href='http://www.hiyoko.co.jp/shohin/hiyoko.html'>銘菓ひよ子</a>が有名です♥"),
new GInfoWindowTab("人口", "日本の人口は約1億2780万人です。<br>その内訳は、s男性≒6230万人/女性≒6546万人。女性の人口の多いです。")
];
/* タブ付き情報ウィンドウ表示(内容はDOMノード) */
marker.openInfoWindowTabsHtml(tabs,opts);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
<p>
<input type="button" value="情報ウィンドウ表示(openInfoWindow)" onclick="fOpenInfoWindow();" /><br>
<input type="button" value="情報ウィンドウ表示(openInfoWindowHtml)" onclick="fOpenInfoWindowHtml();" />
</p>
<p>
<input type="button" value="タブ付き情報ウィンドウ表示(openInfoWindowTabs)" onclick="fOpenInfoWindowTabs();" /><br>
<input type="button" value="タブ付き情報ウィンドウ表示(openInfoWindowTabsHtml)" onclick="fOpenInfoWindowTabsHtml();" />
</p>
<p>
<input type="button" value="情報ウィンドウを閉じる" onclick="marker.closeInfoWindow()" />
</p>
</form>