kintoneの顧客情報からGoogle mapを開き行き方を確認する│kintoneapp BLOG

こんばんは、トッティです。

金曜です、TGIF！

さて、今日は表題の通りkintoneの中にある住所情報を用いてgoogle mapを開きたいと思います。否！開くだけでなく行き方も同時に調べましょう！

早速ですが、下記がサンプルです。

条件：顧客情報アプリ内の住所フィールドのフィールドコードを「address」とする。

<br />
(function () {<br />
    &quot;use strict&quot;;<br />
    kintone.events.on(&#039;app.record.detail.show&#039;, function (event) {<br />
        if (document.getElementById (&#039;my_index_button&#039;) != null) {<br />
            return;<br />
        }</p>
<p>        var address = event.record.address.value;</p>
<p>        var myIndexButton = document.createElement(&#039;button&#039;);<br />
        myIndexButton.id = &#039;my_index_button&#039;;<br />
        myIndexButton.innerHTML =&#039;&lt;a href=&quot;https://www.google.co.jp/maps/dir/千代田区四番町7-5/&#039;+address+&#039;&quot;target=&quot;_blank&quot;&gt;行き方を見る！&lt;/a&gt;&#039;;</p>
<p>         kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);</p>
<p>    });<br />
})();<br />

はい、こちらGoogle mapのAPIを使っているわけでも何でもなく、URLの中に自社の住所と顧客の住所を埋め込んでいるだけです。
“https://www.google.co.jp/maps/dir/スタート地点/ゴール地点/”にアクセスすることで、行き方をGoogle mapで表示できるわけですね。自社住所をJavaScript内に元々記載し、顧客住所をkintone内から引用する。簡単ですよね。

実際の動きは下記です。