dmt13回答ポイント 60pt

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の緯度経度を増やしていきしやすい形ですとありがたいです。

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

kawasaki2010/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/

スター

dmt13 2010/01/04 18:22:15

pheroさん

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

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

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

google map apiの質問です。

ベストアンサー

kawasaki2010/01/04 17:59:08
満足60pt

dmt13 2010/01/04 18:22:15

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

google map apiの質問です。

ベストアンサー

kawasaki2010/01/04 17:59:08 満足60pt

dmt13 2010/01/04 18:22:15

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

kawasaki2010/01/04 17:59:08
満足60pt