新規投稿
フォローする

GoogleMapsAPI 入力した郵便番号から緯度経度を取得できない

 

お世話になっております。

 

こちらで質問させていただきました、

GoogleMapのカスタマイズについてです。

郵便番号の入力フォーム、mapボタンをカレンダー一覧に表示しており、

郵便番号を入力してからmapボタンをクリックすると、

入力した郵便番号の緯度経度を取得し、

カレンダー一覧に表示しているGoogleMapにピンを立たせます。

しかし、下記コードでは、

statusが”ZERO_RESULTS”を取得し、alert("Request failed.")を表示し、

緯度経度を取得することができません。

原因をご教授いただければ幸いです。
 
実装したいことは下記のとおりです。

kintoneのカレンダー形式の一覧画面にGoogleMapを表示しています。

・郵便番号フォームに入力→ボタンクリック→入力した郵便番号にピンを立てる

・日付フォームに日付入力→入力した日付に登録されているレコードの住所にピンを立てる

(参考:https://developer.cybozu.io/hc/ja/articles/202640950-%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)

コードが長くなり、見にくかったので省略しておりますが、

上記リンクで全体のコードを記載しております。


(function () {

    "use strict";

    // API キー

    var api_key = 'XX';

  ~省略~

    //ボタン押すと入力された郵便番号にピンを表示

    document.getElementById('mapBtn').onclick = function () {

        var mapPostcd = document.getElementById("mapPost").value;

        // 緯度経度を取得→ピン表示

        let latlngMp = getLatLngByZipcode(mapPostcd);

    }

    ~省略~

    // 郵便番号からLatLngを取得

    function getLatLngByZipcode(zipcode) {

        var geocoder = new google.maps.Geocoder();

        var address = zipcode;

        geocoder.geocode({ 'address': 'zipcode ' + address }, function (results, status) {

            setTimeout(() => {

                if (status == google.maps.GeocoderStatus.OK) {

                    var latitude = results[0].geometry.location.lat();

                    var longitude = results[0].geometry.location.lng();

                    alert("Latitude: " + latitude + "\nLongitude: " + longitude);

                    // ポイントする座標を指定します

                    var point = new google.maps.LatLng(latitude, longitude);

                    // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します

                    var opts = {

                        zoom: 15,

                        center: point,

                        mapTypeId: google.maps.MapTypeId.ROADMAP,

                        scaleControl: true

                    };

                    // 地図を表示する要素を呼び出します

                    var map = new google.maps.Map(document.getElementById('map'), opts);

                    //ピン表示

                    var marker = new google.maps.Marker({

                        position: point,

                        map: map,

                        title: 'ピン表示'

                    });

                } else {

                    alert("Request failed.")

                }

                return [latitude, longitude];

            }, 2000)

            ~省略~

        });

    }

})();
 

別のfunction内に記載したときに正しく住所を取得できたので、

原因はコードの順番かと思っております。

 

以上、よろしくお願いします。

 

 

0

3件のコメント

Avatar
TO

関石様

ZERO_RESULTSはジオコードが適切に返ってきていないことを示すようです。
存在しない住所が渡されたときなどに生じるようですが、
address(zipcode)には想定した値が入っていますか?

1
Avatar
mls-hashimoto

こちらのページ を見る限り、郵便番号でリクエストをする場合は国のISOコードが必要と書いてあります。

0
Avatar
関石

TO さま

address(zipcode)には値が入っておりました。

ご教授いただきありがとうございました。

0
サインインしてコメントを残してください。