Search

Google Maps JavaScript API v3ジオコーディング

Google Maps JavaScript API V3

指定した住所の緯度・経度を検索
ジオコード

2011/6/26

Google Maps JavaScript API V3 - Geocoderクラス

ジオコードは、指定した住所を検索し、緯度・経度の地理的な座標に変換するサービスです。

ジオコードオブジェクトを作成し、geocode()メソッドで、Geocoderにリクエストを送信します。 addressプロパティには、検索する住所文字列を指定します。 住所に日本語を指定できるようにするには、languageプロパティに「ja」を指定します。 その他、国コード（regionプロパティ）、検索範囲（bounds）などを指定可能です。 

/* ジオコードオブジェクト */
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
  {
    'address': 住所文字列,
    'language': 'ja'
  },
  function(results, status){
    if(status==google.maps.GeocoderStatus.OK){
    	/* 処理 */
    }
  }
);

リクエストが完了すると、callback関数に結果（GeocoderResultオブジェクト）とステータス（GeocoderStatusクラス）が渡されます。 有効なジオコードが取得できたかどうかは、GeocoderStatusが「OK」になっているかどうかで判定できます。

結果はJSON形式で返されます。 GeocoderAddressComponentの配列になっており、指定した住所によっては、複数の結果が含まれる場合もあります。

結果の緯度・経度の地理的な座標（LatLng）は、GeocoderGeometryオブジェクトのlocationプロパティで取得できます。

設置サンプル

指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。 検索のたびに地図上に描画したオーバーレイは削除するようにしています。

例えば「東京タワー」で検索すると、「35.65861,139.745447」という緯度・経度を取得することができます。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <title>設置サンプル - GMAPv3 - ジオコーディング</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var geocoder, map;
         /* 地図上に追加されたオーバーレイを格納する配列 */
        var overlays = [];
        $(function(){
            initialize();
            $("#btn").bind("click",function(){
                codeAddress();
            }).trigger("click");
        });
        /* 地図の初期化 */
        function codeAddress() {
            var address=$("#address").val();
            geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) {
                if(status==google.maps.GeocoderStatus.OK){
                    /* オーバーレイ消去 */
                    if(overlays.length>0){
                        for(i in overlays){
                            overlays[i].setMap(null);
                        }
                        overlays.length=0;
                    }
                    /* 地図の中心点を変更 */
                    map.setCenter(results[0].geometry.location);
                    /* 指定された境界に合うように地図を表示 */
                    if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds);
                    if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport);
                    /* マーカー */
                    var marker = new google.maps.Marker({
                        map:map,
                        position: results[0].geometry.location
                    });
                    var contentString="";
                    contentString+="◆住所<br>　"+address+"<br>";
                    contentString+="◆緯度・経度<br>　"+results[0].geometry.location.toUrlValue()+"<br>";
                    contentString+="◆位置タイプ<br>　"+results[0].geometry.location_type+"<br>";
                    contentString+="◆正確な境界<br>　"+results[0].geometry.bounds+"<br>";
                    contentString+="◆推奨されるviewportの境界<br>　"+results[0].geometry.viewport+"<br>";
                    contentString+="◆結果のジオコード要素タイプ<br>";
                    for(var i in results[0].types){
                        contentString+="　"+results[0].types[i]+"<br>";
                    }
                    /* 情報ウィンドウ */
                    infowindow=new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 250
                    });
                    infowindow.open(map, marker);
                    overlays=[marker, infowindow]
                }else{
                    alert("ジオコードの取得に失敗しました\n"+status);
                }
            });
            return false;
        }
        function initialize(){
            /* ジオコードオブジェクト */
            geocoder = new google.maps.Geocoder();
            /* 緯度・経度：日本 */
            var myLatlng=new google.maps.LatLng(36.204824,138.252924);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 2,
                /* 地図の中心点 */
                center: myLatlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h1>設置サンプル - GMAPv3 - ジオコーディング</h1>
    <p>    指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。</p>
    <form onsubmit="return false;">
        <input type="text" id="address" value="東京タワー" />
        <input type="button" id="btn" value="住所から緯度・経度を取得" />
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

緯度・経度から住所を検索
逆ジオコード

2011/6/26

ジオコードでは、住所から緯度・経度を検索しますが、その逆で、指定した緯度・経度から、住所を検索することができます。

geocode()メソッドで、Geocoderにリクエストを送信する際、LatLngプロパティに、検索する緯度・経度の地理的な座標位置をLatLngで指定します。

設置サンプル

下記の例では、指定した緯度・経度から住所を検索します。 例えば、東京タワーの場合は、緯度・経度（35.65861,139.745447）で検索すると、「日本, 東京都港区芝公園４丁目２−８」という住所を取得できます。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <title>設置サンプル - GMAPv3 - 逆ジオコーディング</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var geocoder, map;
         /* 地図上に追加されたオーバーレイを格納する配列 */
        var overlays = [];
        $(function(){
            initialize();
            $("#btn").bind("click",function(){
                codeLatLng();
            }).trigger("click");
        });
        /* 地図の初期化 */
        function codeLatLng() {
            var latlngStr=$("#latlng").val().split(",");
            var lat=parseFloat(latlngStr[0]);
            var lng=parseFloat(latlngStr[1]);
            var latlng=new google.maps.LatLng(lat, lng);
            geocoder.geocode({'latLng': latlng, 'language': 'ja'}, function(results, status) {
                if(status==google.maps.GeocoderStatus.OK){
                    /* オーバーレイ消去 */
                    if(overlays.length>0){
                        for(i in overlays){
                            overlays[i].setMap(null);
                        }
                        overlays.length=0;
                    }
                    /* 地図の中心点を変更 */
                    map.setCenter(results[0].geometry.location);
                    /* 指定された境界に合うように地図を表示 */
                    if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds);
                    if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport);
                    /* マーカー */
                    var marker = new google.maps.Marker({
                        map:map,
                        position: results[0].geometry.location
                    });
                    var contentString="";
                    contentString+="◆住所<br>　"+results[0].formatted_address+"<br>";
                    contentString+="◆緯度・経度<br>　"+results[0].geometry.location.toUrlValue()+"<br>";
                    contentString+="◆位置タイプ<br>　"+results[0].geometry.location_type+"<br>";
                    contentString+="◆正確な境界<br>　"+results[0].geometry.bounds+"<br>";
                    contentString+="◆推奨されるviewportの境界<br>　"+results[0].geometry.viewport+"<br>";
                    contentString+="◆結果のジオコード要素タイプ<br>";
                    for(var i in results[0].types){
                        contentString+="　"+results[0].types[i]+"<br>";
                    }
                    /* 情報ウィンドウ */
                    infowindow=new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 250
                    });
                    infowindow.open(map, marker);
                    overlays=[marker, infowindow]
                }else{
                    alert("ジオコードの取得に失敗しました\n"+status);
                }
            });
            return false;
        }
        function initialize(){
            /* ジオコードオブジェクト */
            geocoder = new google.maps.Geocoder();
            /* 緯度・経度：日本 */
            var myLatlng=new google.maps.LatLng(36.204824,138.252924);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 2,
                /* 地図の中心点 */
                center: myLatlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h1>設置サンプル - GMAPv3 - 逆ジオコーディング</h1>
    <p>    指定した緯度・経度から、住所を検索し、マーカーと情報ウィンドウを表示します。</p>
    <form onsubmit="return false;">
        <label for="latlng">緯度・経度（カンマ区切り）：</label><input type="text" id="latlng" value="35.65861,139.745447" />
        <input type="button" id="btn" value="住所から緯度・経度を取得" />
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women