kwmt/GoogleMapsApi_ClickedInfoWindow.html

## GoogleMapsApi_ClickedInfoWindow.html
<!doctype html>
<html lang="ja">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=ja"> </script>
<script type="text/javascript">
var cityList = [
    ['福岡',   33.590355,  130.401716, 1],
    ['熊本',   32.8031,    130.707891, 2],
    ['宮崎',   31.907674,  131.420241, 3],
    ['鹿児島',  31.596554,  130.557116, 4]
];

var demoCenter = new google.maps.LatLng(41.062096,141.354376);
var map;

function initialize()
{
	map = new google.maps.Map(document.getElementById('map_canvas'), {
		//fitBoundsで調整するため、zoom,centerはここでは設定しない
		//zoom: 7,
		//center: demoCenter,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	addMarkers();
}

var boxList = [];
var bounds = new google.maps.LatLngBounds();

function addMarkers()
{
	var marker, i;
	var infowindow = new google.maps.InfoWindow({
	// 情報ウィンドウが表示されるとき、
	// 地図内に表示されるように地図を動かすかどうかを指定する。
	// trueは地図を動かさない。
	disableAutoPan: false
	//指定した位置と先端の位置をピクセル単位でずらす。
	//,pixelOffset: new google.maps.Size(0, 0)
	});
	for (var i = 0; i < cityList.length; i++)
	{
		var latlng = new google.maps.LatLng(cityList[i][1], cityList[i][2]);
		//markerを置く
		marker = new google.maps.Marker({
			position: latlng,
			map: map,
			id: i,
			title: cityList[i][0]
		});

		// 文字列だけをクリック可能にしたかったため"font"要素としている
		// divだと同じ行のラインだと文字が無くてもクリック可能になってしまう
		var boxText = document.createElement("font");
		boxText.id = i;
		//boxText.style.backgroundColor = "red";
		boxText.innerHTML = cityList[i][0];
		boxList.push(boxText);

		// markerをクリックした時の振る舞いを定義
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
			//情報ウィンドウにコンテキストをセットして表示する
			infowindow.setContent(boxList[this.id]);
			infowindow.open(map, marker);
			}
		})(marker, i)); //end add marker listener

		// 情報ウィンドウのコンテキストをクリックしたときの振る舞い
		google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
			return function() {
			//alert('clicked ' + cityList[i][0])
			var latlng = new google.maps.LatLng(cityList[i][1], cityList[i][2]);
			var bs = new google.maps.LatLngBounds();
			// Mapクラス panTo(latLng:LatLng)メソッド
			// :latLngで指定された経度緯度に地図の中心をスムーズに移動します。
			map.panTo(latlng);
			bs.extend(latlng);
			bs.extend(getOppositePoint(latlng));
			map.fitBounds(bs);
			map.setCenter(latlng);
			}
		})(marker, i));
		bounds.extend(latlng);
	} //endfor

	// Mapクラス:fitBounds(bounds:LatLngBounds)
	// :boundsで指定された領域全体を含むように表示範囲を設定します。
	map.fitBounds(bounds);
}//end function

// 座標(a,b)を中心とする半径1の(a,b)の対角線上の座標(x,y)を求めるには？(注意：距離ではない)
// (a,b) (x,y) の距離が1
// (x - a)^2 + (y - b)^2 = 1
//さらに対角上の点は
// x - a = y - b　なので
// 2*(x-a)^2 = 1 ⇛ x - a = 1/sqrt(2)
// ⇛ x = a + 1/sqrt(2)
//   y = b + 1/sqrt(2)
function getOppositePoint(latLng)
{
	var latlng;
	var sqrt2 = Math.sqrt(2);
	var x = latLng.Ya + Math.sqrt(0.05)/sqrt2;
	var y = latLng.Za + Math.sqrt(0.05)/sqrt2;
	latlng = new google.maps.LatLng(x,y);
	return latlng;
}
</script>
</head>

<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
	<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
	<a data-rel="back">Back</a>
</div>
<div data-role="content">
	<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
	<div id="map_canvas" style="height:700px;"></div>
	</div>
</div>
</div>
</body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=ja"> </script>
	<script type="text/javascript">
	var cityList = [
	['福岡', 33.590355, 130.401716, 1],
	['熊本', 32.8031, 130.707891, 2],
	['宮崎', 31.907674, 131.420241, 3],
	['鹿児島', 31.596554, 130.557116, 4]
	];

	var demoCenter = new google.maps.LatLng(41.062096,141.354376);
	var map;

	function initialize()
	{
	map = new google.maps.Map(document.getElementById('map_canvas'), {
	//fitBoundsで調整するため、zoom,centerはここでは設定しない
	//zoom: 7,
	//center: demoCenter,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	addMarkers();
	}

	var boxList = [];
	var bounds = new google.maps.LatLngBounds();

	function addMarkers()
	{
	var marker, i;
	var infowindow = new google.maps.InfoWindow({
	// 情報ウィンドウが表示されるとき、
	// 地図内に表示されるように地図を動かすかどうかを指定する。
	// trueは地図を動かさない。
	disableAutoPan: false
	//指定した位置と先端の位置をピクセル単位でずらす。
	//,pixelOffset: new google.maps.Size(0, 0)
	});
	for (var i = 0; i < cityList.length; i++)
	{
	var latlng = new google.maps.LatLng(cityList[i][1], cityList[i][2]);
	//markerを置く
	marker = new google.maps.Marker({
	position: latlng,
	map: map,
	id: i,
	title: cityList[i][0]
	});

	// 文字列だけをクリック可能にしたかったため"font"要素としている
	// divだと同じ行のラインだと文字が無くてもクリック可能になってしまう
	var boxText = document.createElement("font");
	boxText.id = i;
	//boxText.style.backgroundColor = "red";
	boxText.innerHTML = cityList[i][0];
	boxList.push(boxText);

	// markerをクリックした時の振る舞いを定義
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	//情報ウィンドウにコンテキストをセットして表示する
	infowindow.setContent(boxList[this.id]);
	infowindow.open(map, marker);
	}
	})(marker, i)); //end add marker listener

	// 情報ウィンドウのコンテキストをクリックしたときの振る舞い
	google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
	return function() {
	//alert('clicked ' + cityList[i][0])
	var latlng = new google.maps.LatLng(cityList[i][1], cityList[i][2]);
	var bs = new google.maps.LatLngBounds();
	// Mapクラス panTo(latLng:LatLng)メソッド
	// :latLngで指定された経度緯度に地図の中心をスムーズに移動します。
	map.panTo(latlng);
	bs.extend(latlng);
	bs.extend(getOppositePoint(latlng));
	map.fitBounds(bs);
	map.setCenter(latlng);
	}
	})(marker, i));
	bounds.extend(latlng);
	} //endfor

	// Mapクラス:fitBounds(bounds:LatLngBounds)
	// :boundsで指定された領域全体を含むように表示範囲を設定します。
	map.fitBounds(bounds);
	}//end function

	// 座標(a,b)を中心とする半径1の(a,b)の対角線上の座標(x,y)を求めるには？(注意：距離ではない)
	// (a,b) (x,y) の距離が1
	// (x - a)^2 + (y - b)^2 = 1
	//さらに対角上の点は
	// x - a = y - b　なので
	// 2*(x-a)^2 = 1 ⇛ x - a = 1/sqrt(2)
	// ⇛ x = a + 1/sqrt(2)
	// y = b + 1/sqrt(2)
	function getOppositePoint(latLng)
	{
	var latlng;
	var sqrt2 = Math.sqrt(2);
	var x = latLng.Ya + Math.sqrt(0.05)/sqrt2;
	var y = latLng.Za + Math.sqrt(0.05)/sqrt2;
	latlng = new google.maps.LatLng(x,y);
	return latlng;
	}
	</script>
	</head>

	<body onload="initialize()">
	<div id="basic-map" data-role="page">
	<div data-role="header">
	<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
	<a data-rel="back">Back</a>
	</div>
	<div data-role="content">
	<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
	<div id="map_canvas" style="height:700px;"></div>
	</div>
	</div>
	</div>
	</body>
	</html>