指定範囲を全て表示するようZoom値を自動調整「fitBounds」[GoogleMapsAPI]

ちょっとハマったのでメモメモ。

GoogleMapsAPIには、fitBoundsなる便利なメソッドが用意されています。
東西南北端の緯度経度を渡してやれば、それぞれの座標が地図上に全て表示されるように、zoom値を調整してくれるというもの。

ただ、コレの指定のしかたが謎だったのです。
結果的にはこんな感じ。

var maxlat = hoge;//最大緯度
var maxlng = hogehoge;//最大経度
var minlat = foo;//最小緯度
var minlng = foofoo;//最小経度

//北西端の座標を設定
var sw = new google.maps.LatLng(maxlat,minlng);
//東南端の座標を設定
var ne = new google.maps.LatLng(minlat,maxlng);

//範囲を設定
var bounds = new google.maps.LatLngBounds(sw, ne);

//自動調整
map.fitBounds(bounds,5);

map はいつもの感じでMapオブジェクトを作っておく必要ありますが、ここでは省略します。

google.maps.LatLngBounds
↑コレがわからずに四苦八苦しました。
北西端と東南端を用意して、LatLngBoundsに突っ込んでgooglemapsさんご指定の範囲指定形式にしとかんとイカンようです。

なんとか無事に表示できました。
いやはや便利です。

逆ジオコーディング[GoogleMapsAPI]

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
  4. 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]
  5. リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]
  6. 現在表示されている範囲内のマーカーだけ表示する[GoogleMapsAPIVersion3]+[PHP]
  7. ジオコーディング[GoogleMapsAPI]

前回の予告通り、今回は逆ジオコーディングをやります。

本業がふんづまりなので、ちょっと現実逃避に…。

やりかたはごく簡単。
ジオコーディングと同じのようです。

ジオコーディングの時は、アドレスの文字列を渡しましたが、逆ジオコーディングは緯度経度を渡すらしいです。
前回同様、値と一緒に処理用のコールバックを渡してやります。

出来たのがこちら
(さらに…)

現在表示されている範囲内のマーカーだけ表示する[GoogleMapsAPIVersion3]+[PHP]

ずいぶん時間が経ちましたが、続きです。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
  4. 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]
  5. リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までの作り込みでだいたいできましたが、本番で使うにはちょっと問題があります。

それはマーカーの数。

今は20個ほどですが、本来の用途では10,000弱あります。
10,000もマーカーなんかつけたら、重くて使いものになりません。(たぶん)
PCスペックによってはフリーズしてしまいそうです。

なので、ちょっと仕様変更をしなければいけません。
(さらに…)

リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]

途中別のことをやっていて時間が空いてしまいましたが、GoogleMapsAPIです。

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
  4. 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]

残る仕様はひとつ。

  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

これ少しハマりました。
jQueryのところで。
わかってしまえばなんともないんですけどね。
(さらに…)

表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]

Googleさんと先人のおかげで、マーカーと情報ウィンドウまでサクサクと出来ました。
残る仕様は二つ。

  • 現在表示されている地点データの名前を、地図の外にリストとして表示します
  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

今回は「現在表示されている地点データの名前を、地図の外にリストとして表示します」の方をかたづけます。
これもjQueryを使えばすごく簡単。
(さらに…)

XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]

地図、マーカー、情報ウィンドウが表示できたら、地点情報XMLを読み込んで該当する地点にマーカーを表示させます。
完成まであと一歩といった感じでしょうか。

XMLを読み込む

XML読み込み部分を作ります。
その前に、XMLがなければどないしようもないので、以下のようなサンプルXMLを用意しました。
単純に地点の名称と、緯度経度のXMLデータです。

sample.xml

さて、肝心の読み込みですが、さっと調べてみるとjQueryが便利そうなのでコイツを使います。
jQueryは他にも色々な用途で使えるので、遅かれ早かれ導入することになるでしょう。
(さらに…)

マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]

前回の「地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]」で、地図を表示して緯度経度を取得して表示するところは終わりました。
今回は、マーカーとふきだし(情報ウィンドウというようですが、ふきだしのほうが直感的な気がしませんか?)を表示させます。

マーカーの表示と削除

今度はマーカーを表示します。緯度経度取得と順序が逆なような気がしますが、気にしません。
単純にマーカーを表示するだけなら何ともないけど、消すこと考えるとv3からはちょっと考えておかなければならないみたいです。
v2では、
map.clearOverlays();
一発で追加したマーカーが消えたらしいのですが、v3で廃止になったとの事です。
なので配列で表示したマーカーを全部持っておかないとダメみたいです。
(さらに…)

地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]

都道府県別に集められた地点データ群を使って、以下のようなページをつくらなければならなくなりました。

  • とある目的で収集された地点データを扱います
  • 地点データはXML形式で渡されます
  • 地点データをgooglemap上にマーカーとして表示させます
  • マーカーをクリックすると地点データがふきだし(情報ウィンドウというらしい)で表示されます(名前など)
  • 現在表示されている地点データの名前を、地図の外にリストとして表示します
  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

単純に地図を表示するだけなら触った事がありますが、GoogleMapsAPIを使って色々やるのは初めてです。
GoogleMapsAPIを調べながらゴリゴリと書いていきます。

GoogleMapsAPIVersion3で地図を表示する

まずはコレができないと話になりません。
さっさと済ませます。
(さらに…)