現在表示されている範囲内のマーカーだけ表示する[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のところで。
わかってしまえばなんともないんですけどね。
(さらに…)

bit.lyでURLを短縮[PHP]

TwitterBotを作る[PHP]で、とりあえずTwitterにPOSTはできるようになりました。
ただ、周知の通り、Twitterは140文字しかPostできません。
長ったらしいURLなんて入れたら、情報量が少なくなってしまいます。

そこで活躍するのが、URL短縮サービス。
色々ありますが、いつも使っている
http://bit.ly/
のサービスを使う事にしました。
コレを使うと、短縮したURLのクリック数とかの簡単な統計もとってくれるので非常に便利です。

bit.lyにもAPIがあるので調べてみます。
http://code.google.com/p/bitly-api/wiki/ApiDocumentation
…英語ですが…。
(さらに…)

TwitterBotを作る[PHP]

いきなりもちあがった企画の為、Twitterのbotを作らなければならなくなりました。
そんなに難しくないとは思っていましたが、実際のやり方などは全く知らないので、とりあえず調べながら作ってみます。

調べてみると、一番簡単なのはBASIC認証つかってhttp://twitter.com/statuses/update.xmlへリクエストを投げる方法らしい。
http://twitter.com/statuses/update.xml?status=message
のmessageのところにツイートしたい文字列を入れておくだけで、Twitterに投稿できます。
ただ、ユーザー名とパスワードを求められるので、プログラムで処理する場合は、これを自動で渡す処理がいります。

早速Googleさんでサンプルコードを検索すると、
http://d.hatena.ne.jp/bardothodol/20090930
↑にサンプルが載っていました。
(さらに…)

表示されているマーカーのリストを表示する[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で地図を表示する

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