質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

kintoneアプリでleafletの地図を表示させたい

sei-fujikawa
sei-fujikawa

総合スコア14

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

262閲覧

投稿2022/10/12 00:52

前提

kintoneのJavaScript開発

実現したいこと

・leafletで地図が表示される
・地図にピンを手動で立てられる
・入力した住所にピンが立つ

発生している問題・エラーメッセージ

GoogleAPIを利用し、地図を表示させてることはできたが、これをleafletに変更したい。
画面になにも表示されないため、どこが間違っているか当たりがつけられない状態。

該当のソースコード

GoogleAPIを利用した場合(地図表示される)

'''
(function() {

"use strict"; // API キー var api_key = 'GoogleAPIKey'; // ヘッダに要素を追加します function load(src) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; head.appendChild(script); } // 緯度、経度を空にします function emptyLatLng(event) { // event よりレコード情報を取得します var rec = event['record']; // 保存の際に緯度、経度を空にします rec['lat']['value'] = ''; rec['lng']['value'] = ''; return event; } // Google Map を Load します function loadGMap() { // document.write を定義します 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); } // 地図を「住所」フィールドの下に表示します // 緯度・経度がない場合は、住所をもとに緯度・経度を算出し、 // フィールドに値を入れた後、レコードを更新します function setLocationDetail(event) { // レコード情報を取得します var rec = event['record']; // Google Geocoder を定義します var gc = new google.maps.Geocoder(); // 住所が入力されていなければ、ここで処理を終了します if (rec['住所']['value'] === undefined) {return;} if (rec['住所']['value'].length === 0) {return;} // 緯度・経度が入力されていなければ、住所から緯度・経度を算出します if (rec['lat']['value'] === undefined || rec['lng']['value'] === undefined || rec['lat']['value'].length === 0 || rec['lng']['value'].length === 0) { // Geocoding API を実行します gc.geocode({ address: rec['住所']['value'], language: 'ja', country: 'JP' }, function(results, status) { // 住所が検索できた場合、開いているレコードに対して // 緯度・経度を埋め込んで更新します if (status === google.maps.GeocoderStatus.OK) { // 更新するデータの Object を作成します var objParam = {}; objParam['app'] = kintone.app.getId();// アプリ番号 objParam['id'] = kintone.app.record.getId(); // レコードID objParam['record'] = {}; objParam['record']['lat'] = {}; // 緯度 objParam['record']['lat']['value'] = results[0].geometry.location.lat(); objParam['record']['lng'] = {}; // 経度 objParam['record']['lng']['value'] = results[0].geometry.location.lng(); // レコードを更新します kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', objParam, function(resp) { // 成功時は画面をリロードします location.reload(true); }, function(resp) { // エラー時はメッセージを表示して、処理を中断します alert('error->' + resp); return; }); } }); } // 地図を表示する 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['住所']['value'] }); } // 地図を一覧画面のメニュー下のスペースに表示します function setLocationIndex(event) { var lat = []; var lng = []; var recno = []; var rec, i; // レコード情報を取得します rec = event['records']; // 一覧に表示されているすべてのレコードの緯度・経度とレコードIDを配列に格納します for (i = 0; i < rec.length; i += 1) { if (rec[i].lat.value !== undefined && rec[i].lng.value !== undefined) { if (rec[i].lat.value.length > 0 && rec[i].lng.value.length > 0) { lat.push(parseFloat(rec[i].lat.value)); // 緯度 lng.push(parseFloat(rec[i].lng.value)); // 経度 recno.push(parseFloat(rec[i].$id.value)); // レコードID } } } // 一覧の上部部分にあるスペース部分を定義します var elAction = kintone.app.getHeaderSpaceElement(); // すでに地図要素が存在する場合は、削除します // ※ ページ切り替えや一覧のソート順を変更した時などが該当します var check = document.getElementsByName('map'); if (check.length !== 0) { elAction.removeChild(check[0]); } // 地図を表示する要素を定義し、スペース部分の要素に追加します var mapEl = document.createElement('div'); mapEl.setAttribute('id', 'map'); mapEl.setAttribute('name', 'map'); mapEl.setAttribute('style', 'width: auto; height: 250px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(mapEl); // 一覧に表示されているレコードで、緯度・経度の値が入っている // 一番上のレコードの緯度・経度を取得します(地図の中心になります) var latlng = 0; for (i = 0; i < lat.length; i += 1) { if (isNaN(lat[i]) === false && isNaN(lng[i]) === false) { latlng = new google.maps.LatLng(lat[i], lng[i]); break; } } // もし、緯度・経度に値が入っているレコードがなければ、ここで処理を終了します if (latlng === 0) { return;} // 表示する地図の設定を行います var opts = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, title: 'target' }; // 地図の要素を定義します 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) { 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' }); } } } // Google Map がロードされるまで待機します function waitLoaded(event, mode, timeout, interval) { setTimeout(function() { var setTimeout = timeout - interval; if ((typeof google !== 'undefined') && (typeof google.maps !== 'undefined') && (typeof google.maps.version !== 'undefined')) { if (mode === 'detail') { // 詳細画面の場合 setLocationDetail(event); } else if (mode === 'index') { // 一覧画面の場合 setLocationIndex(event); } } else if (setTimeout > 0) { // ロードされるまで繰り返します waitLoaded(event, mode, setTimeout, interval); } }, interval); } // 詳細画面を開いた時に実行します function detailShow(event) { loadGMap(); waitLoaded(event, 'detail', 10000, 100); } // 一覧画面を開いた時に実行します function indexShow(event) { loadGMap(); waitLoaded(event, 'index', 10000, 100); } // 一覧画面で編集モードになった時に実行されます function indexEditShow(event) { var record = event.record; // 住所フィールドを使用不可にします record['住所']['disabled'] = true; return event; } // 登録・更新イベント(新規レコード、編集レコード、一覧上の編集レコード) kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'], emptyLatLng); // 詳細画面が開いた時のイベント kintone.events.on('app.record.detail.show', detailShow); // 一覧画面が開いた時のイベント kintone.events.on('app.record.index.show', indexShow); // 一覧画面で編集モードにした時のイベント kintone.events.on('app.record.index.edit.show', indexEditShow);

})();
'''

試したこと

上記のGoogleMapのAPIをロードするところを下記に変更
'''
var map = L.map('Map').setView([38.508106, 134.930239], 13);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).addTo(map);
'''

HTMLに必要なコードを、どうすればkintoneで実装の方法が分からない状態です。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

AbeTakashi

2022/10/12 01:27

そもそもleafletのライブラリを読み込む処理がなければ地図は表示はされませんが、そのへんはどうなってるのでしょうか? APIのロード部分を書き換えるだけでは当然ですが地図は表示されません。ブラウザのコンソールのエラーメッセージは確認したでしょうか? もう少しJavaScriptの基礎を学ばれた方がいいのかもしれません。
sei-fujikawa

2022/10/12 02:51

ありがとうございます。 コンソールで表示されていないところしか見ていませんでした。 Uncaught ReferenceError: L is not definedと表示されていたので、こちらを調べて進めていきたいと思います。ありがとうございます。
AbeTakashi

2022/10/12 04:30

おそらくですが、そのエラーもライブラリを読み込む処理がないためだと思います。 参考) https://leafletjs.com/examples/quick-start/ チュートリアルをしっかり読まれるといいかとおもいます。最初にleaflet.jsを読み込む必要があります。

回答1

0

自己解決

ライブラリの導入ができていなかった
https://leafletjs.com/examples/quick-start/

投稿2022/10/12 08:16

sei-fujikawa

総合スコア14

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。