人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: dmt13
●カテゴリ:インターネット ウェブ制作
✍キーワード:API duration Google js MAP
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● kawasaki
●60ポイント ベストアンサー

これでできるはずです。

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

◎質問者からの返答

pheroさん

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ