お世話になっております。
こちらで質問させていただきました、
GoogleMapのカスタマイズについてです。
郵便番号の入力フォーム、mapボタンをカレンダー一覧に表示しており、
郵便番号を入力してからmapボタンをクリックすると、
入力した郵便番号の緯度経度を取得し、
カレンダー一覧に表示しているGoogleMapにピンを立たせます。
しかし、下記コードでは、
statusが”ZERO_RESULTS”を取得し、alert(“Request failed.”)を表示し、
緯度経度を取得することができません。
原因をご教授いただければ幸いです。
実装したいことは下記のとおりです。
kintoneのカレンダー形式の一覧画面にGoogleMapを表示しています。
・郵便番号フォームに入力→ボタンクリック→入力した郵便番号にピンを立てる
・日付フォームに日付入力→入力した日付に登録されているレコードの住所にピンを立てる
コードが長くなり、見にくかったので省略しておりますが、
上記リンクで全体のコードを記載しております。
(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 + "Longitude: " + 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内に記載したときに正しく住所を取得できたので、
原因はコードの順番かと思っております。
以上、よろしくお願いします。