このページの本文へ

iPhoneのGPSをJavaScriptで操ろう (4/6)

2009年07月06日 18時24分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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携帯の場合は、ピンチイン、ピンチアウトをサポートしていないため、地図の下側に自動的に虫眼鏡のボタンが表示されます。虫眼鏡ボタンをタッチすることでズームイン、ズームアウトできます。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く