下記、シンプルな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の緯度経度を増やしていきしやすい形ですとありがたいです。
それではよろしくお願い致します。
No.1
55
9
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はダミーです。
1
1
1
1
1
24
20
pheroさん
ご回答有難うございます。
上記のソースを確認いたしましたが、希望の動作が実現しました！
早速ご回答頂き有難うございました！！！