Maps JavaScript API+Google Maps Geocoding APIで住所から座標を求める方法

2018年1月31日

店舗の管理システムなんかを作るときに、住所から座標を求めるようにしたくなる時ってありますよね！
今回は、Maps JavaScript API+Google MapsとGeocoding APIを使って住所から座標を求める方法を紹介します。

導入方法

まずはマップを表示

まずはマップを表示するdivを記述します。

<div id="map" style="height: 500px;"></div>

続いて、GoogleAPIのスクリプトとjQueryを読み込みます。
APIキーは取得したAPIキーを記述、コールバック関数はinitMapを記述してください。
※jQueryは読み込まなくても動作しますが、今回は読み込みます。

<!-- <script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=コールバック関数" async defer></script> -->
<script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

マップを表示するスクリプトを記述します。
ついでにマップの中央にマーカーを表示させます。

//マップオブジェクト
var gMap = null;
//マーカーオブジェクト
var gMarkerCenter = null;

function initMap() {
    //とりあえず、東京都庁を中心にする
    var lat = 35.6896342;
    var lng = 139.6921006999999;

    //座標を設定
    var myLatLng = new google.maps.LatLng(lat, lng)
    var mapOptions = {
        center: myLatLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // マップオブジェクトの生成、マーカー生成
    gMap = new google.maps.Map(document.getElementById("map"), mapOptions);
    gMarkerCenter = drawMarkerCenterInit(myLatLng);
}

//マーカー生成関数
function drawMarkerCenterInit(pos) {
    var markerCenter = new google.maps.Marker({
        position: pos,
        map: gMap,
        draggable: true // ドラッグ可能にする
    });
    return markerCenter;
}

住所から座標を取得する

まずはHTMLを修正します。
緯度経度のテキストボックス、住所のテキストボックス、検索ボタンを追加します。

<div id="map" style="height: 500px;"></div>
<div>
    緯度：<input type="text" value="35.6896342" name="lat" readonly> 経度：<input type="text" value="139.69210069999997" name="lng" readonly><br>
    住所：<input type="text" name="address" size="100"> <input type="button" id="searchAddressBtn" value="検索">
</div>

続いて、javascriptを修正します。
検索ボタンをクリックしたときに、住所を元に座標を求めるように修正します。

//マップオブジェクト
var gMap = null;
//マーカーオブジェクト
var gMarkerCenter = null;

function initMap() {
    //座標をテキストボックスから取得
    var lat = $('[name=lat]').val();
    var lng = $('[name=lng]').val();

    //座標を設定
    var myLatLng = new google.maps.LatLng(lat, lng)
    var mapOptions = {
        center: myLatLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // マップオブジェクトの生成、マーカー生成
    gMap = new google.maps.Map(document.getElementById("map"), mapOptions);
    gMarkerCenter = drawMarkerCenterInit(myLatLng);
}

//マーカー生成関数
function drawMarkerCenterInit(pos) {
    var markerCenter = new google.maps.Marker({
        position: pos,
        map: gMap,
        draggable: true // ドラッグ可能にする
    });
    return markerCenter;
}

//検索ボタンをクリックしたとき
$('#searchAddressBtn').click(function () {
    //Geocoderオブジェクト生成
    var geocoder = new google.maps.Geocoder();
    //住所のテキストボックスから住所取得
    var address = $('[name=address]').val();
    //住所検索実行  
    geocoder.geocode(
            {
                'address': address,
                'region': 'jp'//地域を日本に設定
            },
            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //住所のデータを取得できたとき

                    //取得した座標をマップに反映
                    gMap.setCenter(results[0].geometry.location);
                    //取得した座標をマーカーに反映
                    var pos = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                    gMarkerCenter.setPosition(pos);

                    //取得した座標をテキストボックスにセット
                    $('[name=lat]').val(pos.lat());
                    $('[name=lng]').val(pos.lng());

                } else {
                    //失敗したとき
                    alert('住所検索に失敗しました。<br>住所が正しいか確認してください');
                }
            }
    );
});