いつもお世話になっております。
フォームブリッジ上にGoogleMapsを埋め込みたいと考えております。
なかなか事例が少なく、実現方法について悩んでおりますのでヒント等をご教示いただけますと幸いです。
実現したいこと：フォームブリッジへのGoogleMapsの埋め込み、マップの中央の座標を取得
宜しくお願い致します。
gonさん
こんにちは。
既にご覧になっているかもしれませんが、kintoneのレコード内に表示する方法はあります。
これを利用してFormBridgeに表示することは可能と思います。
但し、そのページ上部にも記載されていますが、GoogleMapsAPIキーを直書きするため
サイト訪問者からキーが見える状態になりますので、コードを難読化する等の対策は必要と思います。
GoogleMapのページを別タブで開くので良ければ、APIは不要なので、以下のようなリンクに飛ばすのも一つの手です。
koichiさん
回答ありがとうございます。
頂いたkintoneカスタマイズの方法を参考にやってみました。
ラベルを設置してその中の要素にdiv idを追加、そのdiv内へMapを表示するというロジックでチャレンジしているのですが、要素は設置できるもののMapの表示がされない（要素に反映されない）状態です。
フォームブリッジだと何か制限事項があるのでしょうか。
テストのために不要なコードはコメントアウトや、値の直接記入をしているためお見苦しいですが、コードを貼り付けます。
(function() {
"use strict";
// API キー
var api_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);
}
// レコード表示時イベントで住所フィールドの値を利用して地図を表示する
fb.events.form.mounted = [function(event) {
var timeout = 10 * 1000; // ms
var interval = 100; // ms
var check = document.getElementsByName('map_latlng');
// 住所情報を元に、地図を「住所」フィールドの下に表示します
function setLocation_address() {
//var locationEl_address = kintone.app.record.getFieldElement('住所');
//if (locationEl_address.length === 0) { return; }
//var check_address = document.getElementsByName('map_address');
//「map_address」という要素が存在しないことを確認
//if (check_address.length !== 0) { return; }
// 地図を表示する div 要素を作成します
var mapEl_address = document.createElement('div');
mapEl_address.setAttribute('id', 'map_address');
mapEl_address.setAttribute('name', 'map_address');
//alert(mapEl_address.textContent);
// 「住所」フィールドの要素の下に mapEl_address で設定した要素を追加します
var elMap = fb.getElementByCode('label');
//elMap.append(mapEl_address);
fb.getElementByCode('label').innerHTML = '<div id="map_address" name="map_address" style="width:400px; height:400px"></div>';
// Google Geocoder を定義します
var gc = new google.maps.Geocoder();
// 「住所」フィールドから値を取得します
//var rec = kintone.app.record.get();
var addressValue = "東京都千代田区霞が関1-1";//テスト住所
// Geocoding API を実行します
gc.geocode({
address: addressValue,
language: 'ja',
country: 'JP'
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
// 地図要素のサイズを指定します
mapEl_address.setAttribute('style', 'width: 300px; height: 250px');
var point = results[0].geometry.location;
var address = results[0].formatted_address;
// 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
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: address
});
}
});
}
// Google Map がロードされるまで待ちます
function waitLoaded() {
setTimeout(function() {
timeout -= interval;
if ((typeof google !== 'undefined') &&
(typeof google.maps !== 'undefined') &&
(typeof google.maps.version !== 'undefined')) {
setLocation_address(); // 住所をもとに地図を表示
} else if (timeout > 0) {
waitLoaded();
} else {
// abort
}
}, interval);
}
if (check.length === 0) {
// enable google maps to call document.write after onload event.
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);
waitLoaded();
}
}];
})();
gonさん
ご確認ありがとうございます。
記載のコードを私の環境で試したところ、地図が表示されました。
APIキーが誤っているなど、ブラウザデベロッパーツールのConsole上にエラーは出ていないでしょうか。
koichiさん
コードをご確認いただきありがとうございます。
console上のエラーはなく、APIキーも間違いありませんでした。Google側でもGeocodingAPIの履歴が残っております。
現在有効にしているのは、
Maps JavaScript API
Geocoding API
の2つですが、リクエストの履歴はGeocoding APIのみです。
このことから表示上の処理の問題ではないかと考えております。
複数ブラウザ、PC環境で試しましたが同じ状態でした。
フォームブリッジ上はスペースだけあり、真っ白という状態です。
もう少しやってみますが、ほかに考えられる原因がありましたらご教示いただけると幸いです。
gonさん
外部サイトになりますが、何かヒントになるかもしれません。
Google Cloud Platform側の設定の問題かもしれません。
koichiさん
返信ありがとうございます。
いただいたあたりも疑い、確認しましたが問題はなさそうでした。
検証いただいたのは私が上記に張り付けたコードをそのままコピーして、ご自身のAPIキーを記入後、アップロード。
フォームブリッジ上にラベルフィールド（ラベルコード:label）を置いていただいたところ動作が問題なかったということでしょうか。
koichiさん
本当に申し訳ありません。凡ミスでした。
エディタの文字コードの設定がいつの間にか変更されており、UTF-8に戻したところ動作しました。
色々と試していただいたにもかかわらず、申し訳ございません。
gonさん
文字コードの問題でしたか。
これは頭になかったので勉強になりました。
解決されて何よりです！
koichiさん
ありがとうございました。
今後ともよろしくお願い致します。