google map apiの質問です。

下記、シンプルなgoogle mapのjsですが、緯度・経度・ZOOMを事前にいくつか配列に格納して、表示するたびにランダムに別のmapを表示したいと考えています。

/* 下記ソース */

<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 20,
center: new google.maps.LatLng(35.681382, 139.766084),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Spry.Effect.AppearFade("map, { duration: 2000 }");
}
</script>

/* 事前に登録したい情報のサンプル */

緯度,経度,ZOOM
・35.681382,139.766084,20
・35.170694,136.881637,19
・34.985458,135.757755,20
・36.708311,136.931668,19





上記のような機能を実現するjsを教えてください。
出来れば私のようなjs初心者でも今後mapの緯度経度を増やしていきしやすい形ですとありがたいです。

それではよろしくお願い致します。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2010/01/04 17:15:35
  • 終了:2010/01/04 18:22:46

ベストアンサー

id:phero No.1

kawasaki回答回数55ベストアンサー獲得回数92010/01/04 17:59:08

ポイント60pt

これでできるはずです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<head>
<title>Sample</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var pos_data = [
		[35.681382, 139.766084, 20],
		[35.170694, 136.881637, 19],
		[34.985458, 135.757755, 20],
		[36.708311, 136.931668, 19],
	];
		
	function initialize() {
		var random_id = parseInt(Math.random() * pos_data.length);
		var myOptions = {
			zoom: pos_data[random_id][2],
			center: new google.maps.LatLng(pos_data[random_id][0], pos_data[random_id][1]),
			// disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.SATELLITE
		}
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}
</script>

</head>
<body onLoad="initialize();">
	<div id="map_canvas" style="width:600px;height:600px;">
	</div>
</body>
</html>

これをtest.htmlとして保存し、ブラウザでご覧いただければと思います。

デバッグしやすくするため、敢えて disableDefaultUI: true の行をコメントアウトしてあります。


URLはダミーです。

http://example.com/

id:dmt13

pheroさん

ご回答有難うございます。

上記のソースを確認いたしましたが、希望の動作が実現しました!

早速ご回答頂き有難うございました!!!

2010/01/04 18:22:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません