こんにちは。サンタクルス・’ドゥ’・モラルハザード・勝利です。
だれかの机の上に消しゴムが置いてあったら、
ことごとく払いのけて地面に落としながら生活しています。
さて、今回はGoogle Maps JavaScript API V3を駆使して、
住所情報を取得して、ある条件を満たした住所情報の場合に、
その住所座標に「アホ」のマーカーを出現させる。
ということにチャレンジしてみようかと思う。
自分の技術力ではこのチャレンジは厳しいことは重々承知ですが、
ここは自分の壁を乗り越える為にチャレンジしてみようと思う。
Google Maps JavaScript API V3とは
このAPIを使用することにより、Google マップをウェブページに埋め込んだりカスタマイズすることができます。アカウントがなくても無料で誰でも利用できるのが敷居が低くいですね。
住所情報を取得する
住所から、「緯度、経度」の地理座標を取得する為にジオコーディング（Geocoding）を使用します。
また、上記とは逆に緯度・経度から住所情報を取得する際に逆ジオコーディング（Reverse Geocoding）を利用します。
行う作業
今回やりたいことは、
「住所情報を取得して、ある条件を満たした住所情報の場合に、
その住所座標に「アホ」のマーカーを出現させる。」
なので、
まとめると
- 自分の壁を越える。
- リクエストとレスポンスの概要をサイトで浅く理解する。
- Googleサンプルをコピーする。
- ジオコーディングを利用して住所、地理座標を取得する。(Googleサンプルで完)
- 取得した地理座標にマーカーをセットする。(Googleサンプルで完)
- 取得した情報が複数ある場合はそれなりの対応を行う。
- 「ある条件」を組み込む。
- 「ある条件」で使うマーカー設置画像をGoogleの画像検索で探す。
となります。
完成
作業の集大成です。
戦場はこちら
つどえ強者よ・・・
うようよ増殖してますね。
これで本当の「世界の・・・」ですね。
やり方は、
テキストボックスに住所を入力してボタンをクリック。どこにいるのか探し当ててください。ちなみに検索するたびにどんどん増えていきます。ズームイン/ズームアウトして世界を見つめると、また違う世界が見えると思うぞ。
※どうしても出現させられない弱者へ・・・
出現パターンは下な感じ。
■出現しない
「東京」
「青森」
□出現する
「東京 3丁目」
「埼玉 6」
「埼玉 13」
「日本 3」
「アメリカ 3」
と、ある倍数とある数字が含まれる検索方法を試してみるのが吉。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
