Google Maps PlatformでkintoneのSFAアプリに地図を表示して顧客訪問を効率化する

<div id="map"></div>

(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "<ここにAPIキー>"});

//１．新規作成、更新、一覧編集が成功した際に地図情報を追加して保存する
kintone.events.on(["app.record.create.submit.success", "app.record.edit.submit.success", "app.record.index.edit.submit.success"], async (event) => {
    const location = await getLocation(event.record);
    if (location != undefined) {
        const update = {
            lat: { value: location.lat() },
            lng: { value: location.lng() },
        };
        const params = { app: event.appId, id: event.recordId, record: update };
        await kintone.api(kintone.api.url("/k/v1/record", true), "PUT", params);
    }

    return event;
});

//２．GoogleMapsAPIを呼び出し、緯度経度情報を返す
async function getLocation(record) {
    const addressValue = getAddress(record);
    if (!addressValue) {
        return;
    }
    const { Geocoder } = await google.maps.importLibrary("geocoding");
    const gc = new Geocoder();
    return new Promise((resolve, reject) => {
        gc.geocode(
            {
                address: addressValue,
                language: "ja",
                country: "JP",
            },
            (results, status) => {
                if (status === google.maps.GeocoderStatus.OK) {
                    resolve(results[0].geometry.location);
                } else {
                    reject();
                }
            }
        );
    });
}

//３．レコードから住所情報を作る
function getAddress(record) {
    const pref = record["prefecture"]["value"];
    if (pref.length === 0) {
        return null;
    }
    const city = record["city"]["value"];
    if (city.length === 0) {
        return null;
    }
    const address1 = record["address1"]["value"];
    const address2 = record["address2"]["value"];
    return `${pref}${city}${address1}${address2}`;
}

// ４．地図ビューの場合に地図を表示する
kintone.events.on(["app.record.index.show"], async function (event) {
    const viewName = event.viewName;
    if (viewName == "地図") {
        await showCustomIndex(event);
    }
    return event;
});

// ５．レコードを取得してマーカー処理を行う
async function showCustomIndex(event) {
    const params = { app: event.appId };
    const resp = await kintone.api(kintone.api.url("/k/v1/records", true), "GET", params);
    await setLocation_address(resp.records);
    return event;
}

// ６．レコードの緯度経度情報からマーカーを表示する
async function setLocation_address(records) {
    const { Map } = await google.maps.importLibrary("maps");
    const { Marker } = await google.maps.importLibrary("marker");

    const lat = [];
    const lng = [];
    const recno = [];

    for (let i = 0; i < records.length; i++) {
        if (records[i].lat.value && records[i].lng.value) {
            lat.push(records[i].lat.value);
            lng.push(records[i].lng.value);
            recno.push(records[i].$id.value);
        }
    }

    // 地図を表示する div 要素を作成
    const mapEl_address = document.createElement("div");
    mapEl_address.setAttribute("id", "map_address");
    mapEl_address.setAttribute("name", "map_address");
    mapEl_address.setAttribute("style", "width: auto; height: 500px;");
    const elMap = document.getElementById("map");
    elMap.appendChild(mapEl_address);

    const center = new google.maps.LatLng(36.0, 138.0);

    var opts = {
        zoom: 10,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
        titie: "map",
    };

    var map = new Map(document.getElementById("map_address"), opts);

    google.maps.event.addListenerOnce(map, "idle", function () {
        const marker = [];
        const m_latlng = [];

        for (let 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 Marker({
                    position: m_latlng[i],
                    map: map,
                    label: recno[i].toString(),
                });
            }
        }
    });
}