例−７：吹き出しの内容を変更できる吹き出しを表示する
・地図上をクリックすると、マーカーを追加します。
・タブ付きのふきだしが表示されます
・タブの内容を編集できます。
|
サンプルプログラム |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
//情報ウィンドウの作成
function addEditableMarker(latlng, initData){
var mk= new GMarker(latlng);
map.addOverlay(mk);
var view = document.createElement("div");
view.innerHTML = initData;
//編集タブの内容
var form = document.createElement("form");
var textarea = document.createElement("textarea");
textarea.cols = "30";
textarea.rows = "6";
var text = document.createTextNode(initData);
textarea.appendChild(text);
var button = document.createElement("input");
button.type = "button";
button.value = "更新";
button.onclick = function(){
view.innerHTML = textarea.value;
map.getInfoWindow().selectTab(0);
}
form.appendChild(textarea);
form.appendChild(button);
GEvent.addListener(mk, "click", function() {
var tab1 = new GInfoWindowTab("表示", view);
var tab2 = new GInfoWindowTab("編集",form);
mk.openInfoWindowTabs( [tab1,tab2]);
});
}
function load(){
map = new GMap2( document.getElementById("map"));
map.setCenter( new GLatLng(35.6984,139.7732), 13 );
//クリック位置に編集可能マーカーを付ける
GEvent.addListener( map, "click", function(ov,latlng){
if(!ov){
addEditableMarker( latlng, "<P>データを入力してください</P>" );
}
});
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html> |
ログイン