お世話になっております。
カレンダー形式の一覧のヘッダーに日付入力欄とボタンを設置し、
日付を選択し、ボタンをクリックすると、
別ウィンドウで、入力日付に登録されたレコードの住所をすべてピンで打ったGooglemapが表示したいです。
現在別ウィンドウを開き、入力日付に登録されたレコードの住所の緯度経度を表示するまで実装できました。
緯度経度の表示ではなく、緯度経度にピンを打った地図を表示する、というところがうまく実装できていません。
下記、コードとなります。
// 日付フォーム、ボタン設置
(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); // 宅配日
}
}
}
}
// ポイントする座標を指定します
var point = new google.maps.LatLng(lat[0], lng[0]);
// 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
// center: _.Ee {lat: ƒ, lng: ƒ}
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 = [];
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'
});
}
}
}
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write(m_latlng);
}
});
})();
下記、上記コードでボタンクリック後の画面となります。
緯度経度ではなく、下記図の緯度経度でポイントを打った箇所の地図がウィンドウに表示されるのが理想です。
以上、よろしくお願いします。