処理内容

・kintone に入力した住所（ポイント名）を追加する前に、緯度・経度を取得しセットします。
・kintone 詳細画面でセットされた緯度・経度の地図を表示します。

完成画面

ポイント名を入力し「保存」後に、詳細画面で表示した地図。

設定画面

画面デザイン

地図を表示する部分はスペースで設定しておく。

JavaScript ファイルアップロード

以下のJavaScriptカスタマイズファイルをアップロード。

kintone の JavaScript コード

kintoneGoogleMap.js


(function() {
	"use strict";
	
	// Google Map の指定
	var script = document.createElement('script');
	script.src = 'https://maps.googleapis.com/maps/api/js?key=<KEYを設定>';
	document.body.appendChild(script);
	
	// 追加・更新画面処理
	kintone.events.on(['app.record.create.submit','mobile.app.record.create.submit',
	'app.record.edit.submit','mobile.app.record.edit.submit'], 
	function(event) {
		var record = event.record;
		if (record['緯度']['value'] > 0 || record['経度']['value'] > 0) {
			return event;
		}
		
		// 緯度・経度を取得（同期処理）
		return new kintone.Promise(function(resolve, reject) {
			var geocoder = new google.maps.Geocoder();
			geocoder.geocode({'address': record['住所']['value']}, function(results, status){
				if(status == google.maps.GeocoderStatus.OK) {
					var lat = results[0].geometry.location.lat();
					var lng = results[0].geometry.location.lng();
					// 小数点第6位以下を四捨五入した値を緯度経度にセット
					record['緯度']['value'] = (Math.round(lat * 1000000) / 1000000).toFixed(6);
					record['経度']['value'] = (Math.round(lng * 1000000) / 1000000).toFixed(6);
				}
				resolve(event);
			});
		});
	});
	
	// 詳細画面処理
	kintone.events.on('app.record.detail.show', 
	function(event) {
		var record = event.record;
		if (!record['緯度']['value'] && !record['経度']['value']) {
			return event;
		}
    	
		var latY = record['緯度']['value'];
		var lngX = record['経度']['value'];
		
		var mapElement = kintone.app.record.getSpaceElement('map_latlng');
		var mapElementDiv = document.createElement('div');
		mapElementDiv.setAttribute('id',   'map');
		mapElementDiv.setAttribute('name', 'map');
		mapElementDiv.setAttribute('style', 'width: 800px; height: 400px');
		mapElement.appendChild(mapElementDiv);
		
		// マップの表示(経度、緯度、倍率、最大倍率)
		dysplayMap(lngX, latY, 18, record['住所']['value']);
	});
	
	// Google Map の表示
	function dysplayMap(fx,fy,zoom,pointName){
		
		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,
			title: pointName
		});
	}
})();

参照情報

【2018年7月16日版】Google Maps の APIキーを取得する ( https://nendeb.com/276 )
Google Maps JavaScript API ( https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja )
Google Maps API の使い方・利用方法 ( http://www.webdesignleaves.com/pr/plugins/googlemap_01.html )
Google Maps API入門 ( https://www.ajaxtower.jp/googlemaps/ )