Googleマップ ver 3を使う
位置情報を取得できるようになったので、次にGoogleマップを表示させます。Googleマップには従来から広く使われている「ver 2」と、今年5月にリリースされたばかりの「ver 3」があります（関連記事）。ver 3はiPhoneやAndroid携帯などモバイル機器での表示が高速化されており、ver 2では必須だったAPIキーも不要になって使いやすくなっています。
ただし、ver 3はver 2とは異なる命令が採用されているため、ver 2と同じ命令、書き方では動作しません。また、現時点ではver 3はver 2のすべての機能をカバーしきれていません。この記事ではver 3をベースに解説しますが、多少表示速度が遅くても使い慣れたver 2がいい、といった場合にはver 2を使っても構いません。Googleマップ ver 3の詳細については、以下のAPIリファレンスが役に立ちます。
●Googleマップ ver 3 APIリファレンス
http://code.google.com/intl/ja/apis/maps/documentation/v3/reference.html
Googleマップver 3で位置情報を扱う場合、ライブラリ読み込み時に以下のように sensor=true を指定します。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
ver 2と異なりAPIキーなどは不要なので <script>タグはすっきりとしています。これでGoogleマップを使う準備ができました。
次にGoogleマップを表示するための領域（コンテナ）を <div>タグを使って以下のように用意します。
<div id="map_canvas" style="width:80%;height:80%"></div>
ここでは表示サイズを縦横とも80%にしてありますが、任意のサイズに変更しても構いません。
表示する領域が用意できたので実際にマップを表示させます。ver 3では new google.maps.Map() を使ってマップオブジェクトを生成します。new google.maps.Map() の書式は以下のようになっています。
new google.maps.Map(表示先エレメント, オプション)
今回の表示先エレメントはID名 map_canvas の <div>タグなので以下のようになります。
new google.maps.Map(document.getElementById("map_canvas"), { オプション })
次にオプションを設定します。オプションは必ず以下の3つを指定しなければいけません。
- zoom
- ズームレベル（1が全体、値が大きいほど詳細）
- center
- 中心の緯度、経度
- mapTypeId
- 表示する地図の種類（以下の種類を指定）
一般的な地図 google.maps.MapTypeId.ROADMAP 航空写真 google.maps.MapTypeId.SATELLITE 一般的な地図＋航空写真 google.maps.MapTypeId.HYBRID 地形 google.maps.MapTypeId.TERRAIN
zoom はズームレベルで値が大きいほど詳細な地図が表示されます。Googleマップは場所によってズームレベルの最大値が異なりますが、多くの場合18がもっとも詳細な表示になります。今回は少しズームアウトした状態の17に設定します。
マップの中心の緯度経度（center）は、緯度経度を扱う専用のオブジェクトを作成する必要があります。直接、緯度経度を指定することはできません。緯度経度を取り扱うオブジェクトは、 new google.maps.LatLng() でパラメーターに緯度、経度を指定します。 表示する地図の種類は mapTypeId で指定します。今回は一般的な地図を使用するので google.maps.MapTypeId.ROADMAP を指定します。
iPhoneのSafariに表示されるGoogleマップ ver 3は、タッチ操作によるドラッグおよびピンチイン、ピンチアウトを自動的にサポートしており、PC用のGoogleマップのようにコントローラーを表示しなくてもズームイン、ズームアウト操作が可能です。ちなみに、話がそれますがAndroid携帯の場合は、ピンチイン、ピンチアウトをサポートしていないため、地図の下側に自動的に虫眼鏡のボタンが表示されます。虫眼鏡ボタンをタッチすることでズームイン、ズームアウトできます。
