お世話になります。
こちらのページを参考に,住所ではなく緯度経度からGoogleマップを表示させたいと思っております。
(実際には緯度経度は別の.jsでgeolocationより取得しています)
そこで2つ問題が起きています。
・PC版だと(各APIにmobileを付けないものを用意しています),詳細画面で問題なくマップ表示されるのですが,モバイルだとマップが表示されません。
・また,PC版でもモバイル版でもイベントハンドラにapp.record.create.changeもしくはmobile.app.record.create.changeを指定していても,レコード新規登録画面で緯度経度が自動取得されているにも関わらず,マップが表示されません。→こちらはコンソールでも良く分かりませんでした。
モバイル環境において,Chromeの開発者ツールでコンソールを見ましたが,以下のコメントでした。
download.do?app=7&contentId=1057&jsType=MOBILE&hash=247f3724fa07a3998f634ddb3aef84e0ab463c65:44 Uncaught ReferenceError: google is not defined
at dysplayMap (download.do?app=7&contentId=1057&jsType=MOBILE&hash=247f3724fa07a3998f634ddb3aef84e0ab463c65:44)
at download.do?app=7&contentId=1057&jsType=MOBILE&hash=247f3724fa07a3998f634ddb3aef84e0ab463c65:38
at show.js:247
at Array.forEach (<anonymous>)
at w (show.js:923)
at gw (show.js:247)
at hw (show.js:247)
at cT (show.js:550)
at r8.e.D (show.js:1909)
at show.js:1067
そこで,コンソールのエラーメッセージをクリックしたところ,ここでエラーとなっておりました。
var point = new google.maps.LatLng(fy,fx);
この周辺を確認しましたが,何が悪いのか分からず,どなたかアドバイス頂けませんでしょうか。
以下に.jsを添付します。よろしくお願いいたします。
(function() {
“use strict”;
// Google Map の指定
var script = document.createElement(‘script’);
script.src = ‘[https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key=\*\*\*\*\*](https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key= ***** )’;
document.body.appendChild(script);
// 詳細画面処理
kintone.events.on([‘mobile.app.record.detail.show’,‘mobile.app.record.create.change’],
function(event) {
var record = event.record;
if (!record[‘緯度’][‘value’] && !record[‘経度’][‘value’]) {
return event;
}
var latY = record[‘緯度’][‘value’];
var lngX = record[‘経度’][‘value’];
var mapElement = kintone.mobile.app.record.getSpaceElement(‘map_latlng’);
var mapElementDiv = document.createElement(‘div’);
mapElementDiv.setAttribute(‘id’, ‘map’);
mapElementDiv.setAttribute(‘name’, ‘map’);
mapElementDiv.setAttribute(‘style’, ‘width: auto; height: 150px;’);
mapElement.appendChild(mapElementDiv);
// マップの表示(経度、緯度、倍率)
displayMap(lngX, latY, 18);
});
// Google Map の表示
function displayMap(fx,fy,zoom){
var point = new google.maps.LatLng(fy,fx);
var opts = {
zoom: zoom,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById(‘map’), opts);
var marker = new google.maps.Marker({
position: point,
map: map
});
}
})();