お世話になっております。
Kintone一覧画面から取得したレコードを
グーグルマップにピンを立てて別ウィンドウに表示させています。
地図の移動ができないのですが、
原因をご教授いただければ幸いです。
エラーは吐いておりません。
拡大縮小はできます。
下記、コードとなります。
// 日付フォーム、ボタン設置
(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 = 'map';
var parenteles = document.getElementsByClassName("calendar-menu-gaia");
var parentele = parenteles[0];
parentele.insertBefore(mapBtn, ele.nextSibling);
parentele.insertBefore(mapDate, ele.nextSibling);
//ボタンクリックのイベント
var myWindow;
document.getElementById('mapBtn').onclick = function () {
//日付フォームの日付を取得
var date = document.getElementById("mapDate").value;
var lat = [];
var lng = [];
var recno = [];
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)); // 経度
recno.push(rec[index][j].name.value); // 名前
day.push(rec[index][j].day.value); // 宅配日
}
}
}
}
// 新規ウィンドウ起動
myWindow = window.open("", "myWindow", "width=500, height=500");
myWindow.document.write("<div id='map'></div>");
// ヘッダに要素を追加します
function load(src) {
var head = myWindow.document.getElementsByTagName('head')[0];
var script = myWindow.document.createElement('script');
script.type = 'text/javascript';
script.src = src;
head.appendChild(script);
}
// Google Map を Load します
// document.write を定義します
var nativeWrite = myWindow.document.write;
myWindow.document.write = function (html) {
var m = html.match(/script.+src="([^"]+)"/);
if (m) { load(m[1]); } else { nativeWrite(html); }
};
var point = new google.maps.LatLng(lat[0], lng[0]);
// 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
var opts = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
clickable: true
};
// 地図の要素を定義します
var map = new google.maps.Map(myWindow.document.getElementById('map'), opts);
var marker = [];
var m_latlng = [];
let Centernum = 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]);
// 入力日付の一番目のレコードの経度緯度を地図の中心にする
if (Centernum === 0) {
map.setCenter(m_latlng[i]);
}
Centernum++;
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|' + recno[i] + '|FF8060|000000'
});
}
}
}
// 「position: relative」を外さないと地図が表示されないがラグが必要のため1秒後に実行
setTimeout(() => {
myWindow.document.getElementById('map').style.position = "";
}, 1000);
}
});
})();
以上、よろしくお願いいたします。