コメント( 0 ) | トラックバック( 0 )

前回、「住所検索を作る」というプログラムで住所から緯度・経度に変換ができましたが、緯度・経度と来たらやっぱり Googleマップ。

というわけで、今回は前回の続きとしてGoogleマップにその緯度・経度情報を与えて、移動できるプログラムを作ってみたいと思います。

Google Maps APIの使い方は、 さまざまなサイトで紹介されていますし、それほど難しくはありません。こちらのサイトから APIキーを取得します。

Google Maps API - Sign Up

規約に同意して、使うURLを入力したらボタンをクリック。なお、ここで申請したURL以外では使うことができないので、ご注意ください。ローカル環境などで開発することもできません。ちょっと不便。。サンプルコードを取得して、新しいファイルを作りましょう。<div id="map">から始まる地図表示用のdiv要素を崩さなければデザインなどは自由に変更していただけます。

なにもせずに、このままサーバーにアップロードしてもすでに Googleマップとしては十分動作します。それでは、これに住所検索を実装していきましょう。

Googleマップで希望する位置に移動するには、緯度・経度の情報が必要です。前回の連載で緯度・経度はすでに取得できているので、これを利用しましょう。

以下のようなプログラムに変更しました。

var map;

function searchAddress(address) {
var xml = new JKL.ParseXML('connect.php?address=' + encodeURI(address));
xml.async(showLatLon);
var data = xml.parse();

function showLatLon(r) {
map.panTo(new GLatLng(r.results.candidate.latitude, r.results.candidate.longitude));
$('display').innerHTML = '緯度:' + r.results.candidate.longitude + ' / 経度:' + r.results.candidate.latitude;
}


function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

注目するのは太字になっている部分。まず、最初に提供されるプログラムでは「load()」というファンクション内で完結してしまっているため、これを別のファンクションでも使えるように「map」変数の宣言を外に出しました。これで、mapオブジェクトを操作することができます。

前回のプログラムをそのまま移植して、緯度・経度を表示する前の部分で、「map.panTo()」というメソッドを呼び出します。これが、移動するための処理。ここに「経度・緯度」の順で値を与えましょう。これで OK。ちゃんと中心部に移動しましたね。

「パン」というのはカメラワークなどでも使われる言葉で、カメラを横にすーっとずらすこと。実は、Googleマップは指定された位置が現在の場所から近い場合にはスーッとなめらかに「パン」します。遠いと、画面切り替えで変わってしまうのでちょっと残念ではありますが・・
もし、遠い距離にもパンさせたい場合には、中継地点をたくさん作って連続してパンさせる必要があるのでしょうが、かなり面倒そうですね。ぜひ、panToメソッドはどんなに遠い距離でもパンして頂きです。。

Googleマップはとにかく色々遊べるので、ぜひ楽しみましょう。

Googleマップ住所検索サンプル | Recently Ajax

はてなブックマークに保存

[PR] Recently Ajaxメルマガ限定、人気記事ランキング