Google Maps × HTML5！ 位置情報取得API「Geolocation」

【こちらの記事は、約5分程でお読みいただけます。】

こんばんは！いつもKENスクールのブログを
お読みいただきまして、ありがとうございます！

今日はGoogleのAPIサービスのお話をしていきます。


皆さんは、携帯電話をお持ちになっている方がほとんどかと思いますが、
現在「スマートフォン」がかなり高いシェア率になっていますよね！
先日のKENスクールブログでも、取り上げられたばかりでした＾＾

⇒Webブログ「スマートフォン - Android OS別出荷台数 -」
http://web.kenblog.net/mobile/1105-android-os.html


日常持ち歩くことの多いスマートフォン（携帯電話）。
現在地の周りにあるお店を調べたりするときに、利用するケースも多くなりました。
また、現在地を、入力フォームの住所や郵便番号に
自動入力させる事も可能ですし、
Webページがより便利に活用できるように日々進化していますよね。

こうした位置情報を取得する
「Geolocation(ジオロケーション)」というサービスを紹介 します。

まずは、今回のサンプル完成例をご紹介します。




上記の画像は、KEN School大宮校の
位置情報をもとに、Google Mapで表示した画面です。

結果は、市役所を表示したようになっていますが…。＾＾

若干緯度や経度にばらつきがあるようですが、
概ね近くの場所が表示されます。

次に、そのコードの紹介です。
実はこれ、HTML5で書かれているんですよ！

まずは、8行目の、
「navigator.geolocation.getCurrentPosition(success,failure);」
について、解説します。

「getCurrentPosition」は、現在開かれているブラウザの位置情報を取得し、
成功時の処理と、失敗時の処理を()の中に記述しています。

成功時には、10行目から15行目で記述されている「success」が実行され、
失敗時には、17行目から19行目の「failure」が実行される事になります。

次に、位置情報を取得が成功した処理「success」の内容の確認です。

11行目　「position.coords.latitude」 では、緯度を取得しています。
12行目　「position.coords.longitude」 では、経度を取得しています。

13行目で取得した緯度と経度をもとに「Google MapのURL」を作成して、
14行目　「location.href = uri」 と「Google Mapのページ」を表示しています。

location.hrefはHTMLの<a href="">をクリックした時と同じ動作です。

皆さんも是非サンプルコードをお試しになって、
地図が表示されるのを確認してみてください！

※Firefoxなどのモダンブラウザにて、動作確認をするのが良いです。

今後もHTML5の新しい技術をもとに、
どのような仕組みやサービスが出てくるのか楽しみです＾＾

--------------------------------------------------------------------------------

KENスクールで「プログラム」を一から学習していきませんか？？

⇒【無料のマンツーマン体験レッスンを受けてみよう！】
KENスクールでは、プログラムが初めての方でも、
安心して学習していただける環境です！
プログラムとは何か？から始まり、
様々に利用されているプログラミング技術を分野ごとに紹介します。

是非、無料体験レッスンを受けてみてください！

本日の更新者：
パソコンスクール KENスクール Programコース
インストラクター 加藤