お世話になります。
タイトルの通り、サブテーブル内のレコード（住所）を使用し一覧画面の地図にピンを表示したいと考えております。
https://cybozudev.zendesk.com/hc/ja/articles/202341964-%E9%A1%A7%E5%AE%A2%E8%A8%AA%E5%95%8F%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%94%E3%83%B3%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B
こちらと、
https://cybozudev.zendesk.com/hc/ja/articles/202422244-%E7%AC%AC6%E5%9B%9E-%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E5%80%A4%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B
こちらを参考にさせていただいたのですがうまく住所の取得ができません。
どなたかご教授お願いいたします。
あれ さん
cstapの瀧ヶ平です。
サブテーブル内のフィールドがどのようになっているのかわかりませんが、詳細画面だけであれば、レコードのサブテーブルから新たに疑似的にレコードのようなオブジェクトを作成し、こちらのsetLocationDetail関数をサブテーブルのデータの数だけ実行するなどの方法が考えられます。
ただ、setLocationDetail関数はレコードの更新処理を含んでいるため、処理を以下のように書き替え、更新処理を削除するなどの必要があります。
// 地図を「住所」フィールドの下に表示します
// 緯度・経度がない場合は、住所をもとに緯度・経度を算出し、
// フィールドに値を入れた後、レコードを更新します
function setLocationDetail(event) {
// レコード情報を取得します
var rec = event['record'];
// Google Geocoder を定義します
var gc = new google.maps.Geocoder();
// 住所が入力されていなければ、ここで処理を終了します
if (rec['Address']['value'] === undefined){return;}
if (rec['Address']['value'].length === 0){return;}
// Geocoding API を実行します
gc.geocode({
address: rec['Address']['value'],
language: 'ja',
country: 'JP'
}, function(results, status) {
// 住所が検索できた場合、開いているレコードに対して
// 緯度・経度を埋め込む
if (status === google.maps.GeocoderStatus.OK) {
rec['lat']['value'] = results[0].geometry.location.lat();
rec['lng']['value'] = results[0].geometry.location.lng();
}
// 地図を表示する div 要素を作成します
var mapEl_address = document.createElement('div');
mapEl_address.setAttribute('id', 'map_address');
mapEl_address.setAttribute('name', 'map_address');
mapEl_address.setAttribute('style', 'width: 300px; height: 250px');
// 「Map」スペース内に mapEl_address で設定した要素を追加します
var elMap = kintone.app.record.getSpaceElement('Map');
elMap.appendChild(mapEl_address);
// 「Map」スペースの親要素のサイズを変更します
var elMapParent = elMap.parentNode;
elMapParent.setAttribute('style', 'width: 300px; height: 250px');
// ポイントする座標を指定します
var point = new google.maps.LatLng(rec['lat']['value'],rec['lng']['value']);
// 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
var opts = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
// 地図を表示する要素を呼び出します
var map_address = new google.maps.Map(document.getElementById('map_address'), opts);
// マーカーを設定します
var marker = new google.maps.Marker({
position: point,
map: map_address,
title: rec['Address']['value']
});
});
}
また、呼び出し時はwaitLoaded関数を以下のように書き替える必要があります。
// Google Map がロードされるまで待機します
function waitLoaded(event, mode, timeout, interval) {
setTimeout(function () {
timeout -= interval;
if ((typeof google !== 'undefined')
&& (typeof google.maps !== 'undefined')
&& (typeof google.maps.version !== 'undefined')) {
if (mode === 'detail'){ // 詳細画面の場合
for (var i=0; i < record['サブテーブル'].value.length; ++i) {
var data = {
record: {
Address: {
value : record[サブテーブル].value[i]['住所']['value']
},
'let': {
value : ""
},
'lng': {
value : ""
}
}
};
setLocationDetail(data);
}
} else if (mode === 'index'){ // 一覧画面の場合
setLocationIndex(event);
}
} else if (timeout > 0) { // ロードされるまで繰り返します
waitLoaded(event, mode, timeout, interval);
}
}, interval);
}
サブテーブルのフィールドコードは’サブテーブル’、サブテーブル内の住所フィールドのフィールドコードは’住所’と想定してコードを改変しています。