古籏一浩のJavaScriptラボ ― 第1回

iPhoneのGPSをJavaScriptで操ろう

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

前へ 1 2 3 4 5 6 次へ