お世話になっております。
kintoneのカレンダー形式の一覧画面にGoogleMapを表示しています。
・郵便番号フォームに入力→ボタンクリック→入力した郵便番号にピンを立てる
・日付フォームに日付入力→入力した日付に登録されているレコードの住所にピンを立てる
下記コードですと、どちらかを実行すると、片方が実行されなくなります。
アドバイスをいただければ幸いです。
/*
* 一覧画面に地図を表示するサンプルプログラム
* Copyright (c) 2013 Cybozu
*
* Licensed under the MIT License
*/
(function () {
"use strict";
// API キー
var api_key = 'key';
// ヘッダに要素を追加します
function load(src) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
head.appendChild(script);
}
// 緯度、経度を空にします
function emptyLatLng(event) {
// event よりレコード情報を取得します
var rec = event['record'];
// 保存の際に緯度、経度を空にします
rec['lat']['value'] = '';
rec['lng']['value'] = '';
return event;
}
// Google Map を Load します
function loadGMap() {
// document.write を定義します
var nativeWrite = document.write;
document.write = function (html) {
var m = html.match(/script.+src="([^"]+)"/);
if (m) { load(m[1]); } else { nativeWrite(html); }
};
// Google Map の API ライブラリをロードします
load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
}
// 地図を「住所」フィールドの下に表示します
// 緯度・経度がない場合は、住所をもとに緯度・経度を算出し、
// フィールドに値を入れた後、レコードを更新します
function setLocationDetail(event) {
省略
}
// 地図を一覧画面のメニュー下のスペースに表示します
function setLocationIndex(event) {
var lat = [];
var lng = [];
var recName = [];
var recTime = [];
var day = [];
var rec, i;
// レコード情報を取得します
rec = event['records'];
let recs = Object.keys(rec);
// 一覧に表示されているすべてのレコードの緯度・経度と名前を配列に格納します
for (i = 0; i < recs.length; i += 1) {
let index = recs[i];
for (let j = 0; j < rec[index].length; j += 1) {
if (rec[index][j].lat.value !== undefined && rec[index][j].lng.value !== undefined) {
if (rec[index][j].lat.value.length > 0 && rec[index][j].lng.value.length > 0) {
lat.push(parseFloat(rec[index][j].lat.value)); // 緯度
lng.push(parseFloat(rec[index][j].lng.value)); // 経度
recName.push(rec[index][j].name.value); // 名前
day.push(rec[index][j].day.value); // 宅配日
recTime.push(rec[index][j].time.value); // 希望時間帯
}
}
}
}
// 一覧の下部部分にあるスペース部分を定義します
var elAction = document.getElementsByClassName('contents-bottommenu-gaia')
elAction = elAction[0];
// すでに地図要素が存在する場合は、削除します
// ※ ページ切り替えや一覧のソート順を変更した時などが該当します
var check = document.getElementsByName('map');
if (check.length !== 0) {
elAction.removeChild(check[0]);
}
// 地図を表示する要素を定義し、スペース部分の要素に追加します
var mapEl = document.createElement('div');
mapEl.setAttribute('id', 'map');
mapEl.setAttribute('name', 'map');
mapEl.setAttribute('style', 'width: auto; height: 700px; margin-right: 30px; border: solid 2px #c4b097');
elAction.appendChild(mapEl);
var point = new google.maps.LatLng(lat[0], lng[0]);
// 表示する地図の設定を行います
var opts = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
title: 'target'
};
// 地図の要素を定義します
var map = new google.maps.Map(document.getElementById('map'), opts);
var marker = [];
var circle = [];
var circle2 = [];
var m_latlng = [];
// 日付フォームの値が変更されたら実行
document.getElementById("mapDate").onchange = function () {
// daylat,daylng 入力した日付の緯度経度
var dayLat = [];
var dayLng = [];
// 前回打った円を削除
if (circle.length > 0) {
for (var i = 0; i < circle.length; i++) {
if (circle[i] !== undefined) {
circle[i].setMap(null);
}
}
}
// 前回打ったポイントを削除
if (marker.length > 0) {
for (var i = 0; i < marker.length; i++) {
if (marker[i] !== undefined) {
marker[i].setMap(null);
}
}
}
var date = document.getElementById("mapDate").value;
// ポインタの周りの円
var pntCircle = new google.maps.LatLng(lat[0], lng[0]);
// 緯度・経度をもとに、地図にポインタを打ち込みます
for (i = 0; i < lat.length; i += 1) {
if (isNaN(lat[i]) === false && isNaN(lng[i]) === false) {
if (date === day[i]) {
m_latlng[i] = new google.maps.LatLng(lat[i], lng[i]);
pntCircle[i] = new google.maps.LatLng(lat[i], lng[i]);
dayLat.push(lat[i]);
dayLng.push(lng[i]);
// 希望時間帯 AM黄色 PM水色
if (recTime[i] == "AM") {
// ポインタ
marker[i] = new google.maps.Marker({
position: m_latlng[i],
map: map,
// ポインタのアイコンは Google Charts を使用します
icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|'
+ recName[i] + '|ffff33|000000'
});
// 円
circle[i] = new google.maps.Circle({
center: pntCircle[i], // 中心点(google.maps.LatLng)
fillColor: '#ffa500', // 塗りつぶし色
fillOpacity: 0.25, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
map: map, // 表示させる地図（google.maps.Map）
radius: 5000, // 半径（ｍ） 15分圏内＆30km/h想定
strokeColor: '#ffa500', // 外周色
strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明）
strokeWeight: 1 // 外周太さ（ピクセル）
});
} else {
// ポインタ
marker[i] = new google.maps.Marker({
position: m_latlng[i],
map: map,
// ポインタのアイコンは Google Charts を使用します
icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|'
+ recName[i] + '|33ffff|000000'
});
// 円
circle[i] = new google.maps.Circle({
center: pntCircle[i], // 中心点(google.maps.LatLng)
fillColor: '#0000ff', // 塗りつぶし色
fillOpacity: 0.25, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
map: map, // 表示させる地図（google.maps.Map）
radius: 5000, // 半径（ｍ） 15分圏内＆30km/h想定
strokeColor: '#0000ff', // 外周色
strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明）
strokeWeight: 1 // 外周太さ（ピクセル）
});
}
}
}
}
// マーカーがいい感じに表示できるよう調整
map.fitBounds(new google.maps.LatLngBounds(
// sw
{
lat: Math.min(...dayLat),
lng: Math.min(...dayLng)
},
// ne
{
lat: Math.max(...dayLat),
lng: Math.max(...dayLng)
}
));
// 縮尺が13以下の場合、縮尺を13にする
var listener = google.maps.event.addListener(map, "idle", function () {
if (map.getZoom() < 13) map.setZoom(13);
google.maps.event.removeListener(listener);
});
};
}
// Google Map がロードされるまで待機します
function waitLoaded(event, mode, timeout, interval) {
setTimeout(function () {
var setTimeout = timeout - interval;
if ((typeof google !== 'undefined')
&& (typeof google.maps !== 'undefined')
&& (typeof google.maps.version !== 'undefined')) {
if (mode === 'detail') { // 詳細画面の場合
setLocationDetail(event);
} else if (mode === 'index') { // 一覧画面の場合
setLocationIndex(event);
}
} else if (setTimeout > 0) { // ロードされるまで繰り返します
waitLoaded(event, mode, setTimeout, interval);
}
}, interval);
}
// 詳細画面を開いた時に実行します
function detailShow(event) {
loadGMap();
waitLoaded(event, 'detail', 10000, 100);
}
// 一覧画面を開いた時に実行します
function indexShow(event) {
loadGMap();
waitLoaded(event, 'index', 10000, 100);
}
// 一覧画面で編集モードになった時に実行されます
function indexEditShow(event) {
var record = event.record;
// 住所フィールドを使用不可にします
record['住所']['disabled'] = true;
return event;
}
// 登録・更新イベント(新規レコード、編集レコード、一覧上の編集レコード)
kintone.events.on(['app.record.create.submit',
'app.record.edit.submit',
'app.record.index.edit.submit'], emptyLatLng);
// 詳細画面が開いた時のイベント
kintone.events.on('app.record.detail.show', detailShow);
// 一覧画面が開いた時のイベント
kintone.events.on('app.record.index.show', indexShow);
// 一覧画面で編集モードにした時のイベント
kintone.events.on('app.record.index.edit.show', indexEditShow);
})();
// 日付フォーム、ボタン設置
(function () {
"use strict";
kintone.events.on('app.record.index.show', function (event) {
var ele = document.getElementById("memo");
// 日付入力欄 要素ノードを作る
var mapDate = document.createElement('input');
mapDate.type = 'date';
mapDate.id = 'mapDate';
// ボタン 要素ノードを作る
var mapBtn = document.createElement('input');
mapBtn.type = 'button';
mapBtn.id = 'mapBtn';
mapBtn.value = 'ピン表示';
// 郵便番号入力欄 要素ノードを作る
var mapPost = document.createElement('input');
mapPost.type = 'text';
mapPost.id = 'mapPost';
var parenteles = document.getElementsByClassName("calendar-menu-gaia");
var parentele = parenteles[0];
parentele.insertBefore(mapDate, ele.nextSibling);
parentele.insertBefore(mapBtn, ele.nextSibling);
parentele.insertBefore(mapPost, ele.nextSibling);
//ボタン押すと入力された郵便番号にピンを表示
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];
}, 1000)
});
}