06月26日
Google Maps API Ver.3を使ってみよう
Mac miniを買いに梅田まで出たものの、売る気の全くない売り場構成＆定価販売で買うのが負けな気がしたので買わずに帰ってきました。交通費を考えると、どんどん通販との差が無くなってきてます…orz
ということで今日は技術ネタ、と言えないくらい簡単に使えるようになってしまったGoogle MapsのVer.3の簡単すぎる導入のお話しを。
これまでGoogle Mapは、使用するサイトのURLに対する一意のコードをGoogleから取得して使用してました。なのでローカル開発環境、テスト環境、本番環境とコードを取得しないといけない場合もあって、結構面倒な場面も。。。
Ver.3からはこのコードが廃止されたので、そんなこたぁ気にせずに使えるようになったのです！（ひゅーひゅー！太っ腹～）
さらに、これまで行われてきた細かいバージョンアップで煩雑化していた箇所が大幅にブラッシュアップされて結構素直に使えるような印象です（そこまで深く触ってないのですが…）。
ということで今回は簡単に地図を表示するまでを見てみたいと思います。
まずはGoogle Maps APIの読み込みです。
-
<script type="text/javascript"
-
src="http://maps.google.com/maps/api/js?sensor=false">
-
</script>
最後の引数「sensor」は
"Note that we also need to set a sensor parameter to indicate whether this application uses a sensor to determine the user's location. We've left this example as a variable set_to_true_or_false to emphasize that you must set this value to either true or false explicitly."
とあるので、要はGPSセンサーを使ってゴニョゴニョするのか？というのを指定する物のようです。通常「false」で大丈夫だと思います。
-
<script type="text/javascript">
-
jQuery(document).ready(function() {
-
var ll = new google.maps.LatLng(
-
34.692622,135.190526
-
);
-
var options = {
-
zoom:15,
-
center:ll,
-
mapTypeId:google.maps.MapTypeId.ROADMAP
-
};
-
var map = new google.maps.Map(
-
document.getElementById('map'),
-
options
-
);
-
-
var marker = new google.maps.Marker({
-
position: ll,
-
map: map,
-
title:"SugarFree 移転前店舗"
-
});
-
});
-
</script>
-
<body onLoad="init();">
とかしてもいいんだけど、そこはjQueryerということで、DOMの準備が整ったタイミングで始めましょう。
流れとしては、
- 中心地点を取得
- オプションを設定
- 指定した要素に地図を読み込み
- 地図を指定してマーカー設置
と流れ的にはVer.2と一緒です。
MapTypeIdは
- ROADMAP ← 地図
- SATELLITE ← 航空写真
- HYBRID ← 上2つの合わせ技
- TERRAIN ← 地形
とこれまた一緒。
マーカーについては、これまでの
「マップの上にマーカーを追加する」
-
map.addOverlay(new GMarker(ll));
というスタンスから
「マーカーがマップを指定する」
-
var marker = new google.maps.Marker({
-
position: ll,
-
map: map,
-
title:"hogehoge"
-
});
みたいになってます。ちなみに「title」はマーカー上にマウスを持って行った時に表示される文字列を指定します。
速度も速くなり、コードもシンプルになり、でとても良い感じですね～
詳しいドキュメントは↓を参照のこと（英語しか無いですケドネ）
http://code.google.com/intl/ja/apis/maps/documentation/v3/
そういえば国内ではまだ使用できなかった「ルート案内」機能が6/19から使用できるようになったようです。面白いサービスも作ることが出来そうですね～こちらも追々、触ってみたいと思います。
トラックバック URL
コメント & トラックバック
コメントフィード
コメント