2010年10月06日

Google AJAX Search APIで位置情報(国・都道府県・市町村etc)取得

言語:JavaScript

GoogleはGoogle AJAX Search APIというものを公開しており、これを利用することで、Googleのサービスを自分のWebアプリに組み込むことができます。また、Google AJAX Search APIはAPIキーの登録がいらないようなので、気軽に使えます。

Google AJAX Search APIにはクライアントの国・都道府県・市町村などの住所に近い情報を得ることができる機能があります。結構楽しいので、使い方を紹介します。

1. google.loader.ClientLocationオブジェクト


google.loader.ClientLocationpオブジェクトはアプリケーションがAJAX API ローダーを使用した場合に生成されるといったことが公式ドキュメントには書かれています。要するにgoogle.loader.ClientLocationがさまざまな位置情報をもっているので、それを参照すれば、位置情報を取得できるという話です。

ちなみに、クライアントのIPアドレスから位置情報が割り出せなかった場合は、google.loader.ClientLocationはnullになります。

2. google.loader.ClientLocationのプロパティ


google.loader.ClientLocationオブジェクトが生成されると、次のプロパティが読み込まれるようです。

ClientLocation.latitude:緯度
ClientLocation.longitude:経度
ClientLocation.address.city:市町村
ClientLocation.address.country:国
ClientLocation.address.country_code:国名コード
ClientLocation.address.region:都道府県

3. 使用例


「位置を取得」ボタンを押すと、テキストボックスに位置情報が表示されます。
<html>
    <head>
        <title>Google AJAX Search API</title>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script language="Javascript" type="text/javascript">
        <!--
        function getAddress() {
            if ( google.loader.ClientLocation == null ) {
                alert("位置情報の取得に失敗しました。");
            }

            document.getElementById("country").value = google.loader.ClientLocation.address.country;
            document.getElementById("region").value = google.loader.ClientLocation.address.region;
            document.getElementById("city").value = google.loader.ClientLocation.address.city;
            document.getElementById("latitude").value = google.loader.ClientLocation.latitude;
            document.getElementById("longitude").value = google.loader.ClientLocation.longitude;
        }
        -->
        </script>
    </head>
    <body>
        国名:<input type="text" id="country" /><br />
        都道府県:<input type="text" id="region" /><br />
        市区町村:<input type="text" id="city" /><br />
        緯度:<input type="text" id="latitude" /><br />
        経度:<input type="text" id="longitude" /><br />
        <input type="button" onclick="getAddress()" value="位置を取得" />
    </body>
</html>


この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/nbhkst-tech/51470403 

トラックバックはまだありません。

コメントはまだありません。

コメントする。

絵文字
 
星  顔