Microsoft Bing Maps APIを使ってみる


地図×kintoneということで、OpenStreetMapやGoogle Mapsとの連携はよく目にしますが、Microsoftが提供しているサービス「Bing Map API」とkintoneの連携があまりなかったので、調べてサンプルを作ってみました。

Bing Mapsの Document

「kintoneカスタマイズビュー」での完成イメージ

  • レコード一覧(カスタマイズビュー)
    2021k1.png

  • レコード詳細

主な仕様

  • カスタマイズビュー機能を使って、左ペインに地図、右ペインにリストを作成
  • 緯度経度の座標を元に地図を描画する 縮尺、Tileはランダム
  • Nameのリンクをクリックすると地図が変わる
  • 右ペインの矢印(→)アイコンをクリックするとレコードの詳細に移動する
  • レコード追加/編集画面で、緯度経度値などを変更できる
  • レコード詳細画面で地図を描画する
  • PC版のChrome, Firefoxのみ確認済

ソースコードなど

簡素ではありますが、ソースコード、データ、手順などはGitHubにて公開

参考情報