お世話になっております。
下記投稿で質問させていただいたものです。
カレンダー形式の一覧のヘッダーに日付入力欄とボタンを設置し、
日付を選択し、ボタンをクリックすると、
別ウィンドウで、入力した日付で登録されたレコードの住所をすべてピンで打ったGooglemapが表示したいです。
下記コードを書きましたが、
下図エラーが表示されます。
原因をご教授いただければ幸いです。
下記ステップインした時点のウィンドウの生成されたHTML
google.maps.Map(myWindow.document.getElementById(‘map’), opts);
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&key=XXX"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
js
// 日付フォーム、ボタン設置
(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>");
// API キー
var api_key = 'XXX';
// ヘッダに要素を追加します
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); }
};
// Google Map の API ライブラリをロードします
load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
// 地図の要素を定義します
var map = new google.maps.Map(myWindow.document.getElementById('map'), opts);
// ↑↑ エラーが表示される ↑↑
var marker = [];
var m_latlng = [];
// 緯度・経度をもとに、地図にポインタを打ち込みます
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]);
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);
}
});
})();