kintone の住所から緯度・経度を取得して地図を表示

処理内容

・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/ )