はじめに

先日記事にした、Google Maps API でGeocodingしようとしたらundefinedになるの中で逆ジオコーディングについて触れたので、都道府県名だけを取得するJSを書いてみようと思います。

ちなみに、Google Maps API の基本的な使い方はこちら。

逆ジオコーディングの書き方

まず、基本的な逆ジオコーディングの書き方はこちら

html

<!DOCTYPE html>
<html>
<head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 500px;
            width: 50%;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 30%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

    </style>
</head>
<body>
<div id="floating-panel">
    <input id="latlng" type="textbox" value="35.689488, 139.691706">
    <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initMap()
    {
        var myLatLng = {lat: 35.658581, lng: 139.745433};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: myLatLng
        });
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });

        document.getElementById('submit').addEventListener('click', function () {
            geocodeLatLng(getPreName);
            alert("処理終了");
        });
    }

    function geocodeLatLng(callback) {
        var geocoder = new google.maps.Geocoder();
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
        geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    callback(results);
                } else {
                    alert('No results found');
                }
            } else {
                alert('Geocoder failed due to: ' + status);
            }
        });
    }

    function getPreName(geoCodeResults)
    {
        // ジオコーディング結果を用いた処理
        console.log(geoCodeResults);
    }
    initMap();
</script>
</body>
</html>

ここは、前回までと同じですね。

都道府県名だけを取得する

緯度・経度からヒットした値はObjectで返却されてきます。
値がたくさんあり、「どこに都道府県入ってるんだよ」となりかねません。

ということで、返って来た値のどこに都道府県名があるかというと、上記のコードであれば
geoCodeResults[0].address_componentsの中の配列のtypes[0]がadministrative_area_level_1のlong_nameです。~~追うの大変！！！~~

ぐるぐる回して都道府県名だけを取得しようと思います。（もっといい方法があるはず）

    function getPreName(geoCodeResults)
    {
        // ジオコーディング結果を用いた処理
        var geoCnt = geoCodeResults[0].address_components.length;
        var prefName = "";
        for (var i = 0; i < geoCnt; i++) {
            if (geoCodeResults[0].address_components[i].types[0] === "administrative_area_level_1") {
                prefName = geoCodeResults[0].address_components[i].long_name;
                return prefName;
            }
        }
        return prefName;
    }

関数の引数に逆ジオコーディングで取得した結果を入れます。
そして、都道府県名が入っている箇所を判定して、都道府県名が入っている箇所が来たら都道府県名を返す、という簡単な処理。

ぶんぶん回すのあんまり好きじゃないんですけどね(｀；ω；´)

※追記※
wf9a5m75さんよりコメント頂きました。ありがとうございますm(_ _)m

function getPreName(geoCodeResults)
{
    // ジオコーディング結果を用いた処理
    var results = geoCodeResults[0].address_components.filter(function(component) {
      return component.types.indexOf("administrative_area_level_1") > -1;
    });
    console.log(results[0].long_name);
}

このように書けば、forで書くよりシンプルでいいですね。

おわりに

結構簡単でしたね。
どこに何が入っているのかが分かればそこまで難しいことではありませんでした。

他にも、都道府県名だけではなくて国名が欲しい！市区町村名が欲しい！など、その値が入ってる箇所を見て、判定ロジックを変更すれば取得できますね！！！

Google Maps API のReverse Geocodingで都道府県名だけを取得

はじめに

逆ジオコーディングの書き方

都道府県名だけを取得する

おわりに