Bubbleでピンをドラッグして好みの場所の位置情報を登録しよう

ノーコードツール「Bubble」を使って自分の好みの位置にピンをドラッグして位置情報を登録する方法を解説します。

住所情報を入力して場所を指定することも出来ますが、微妙に場所がずれていたりした場合に手動でピンを動かしたいことありませんか？私はあります。
そのような場合、Bubbleではピンを動かすのは地味に大変だったりします。

今回、そのような方に向けてplugin「Mapbox Maps」を使ってピンのドラッグする方法を説明します。Mapbox Mapsは有料のプラグインなので、Mapbox Mapsを使うとこんなことが出来るんだぁ、という感じで見てもらってもよいかと思います。

ゴールイメージ

場所を入力してその位置にドラッグ可能なマーカーを設置します。

設置したマーカーをドラッグして任意の場所に動かし、その場所の名前と緯度、経度をデータベースに登録します。

その後、登録した位置情報を基にその位置に移動します。

適当にピンを置いたので若干ずれてますが・・・

実装方法

データベースを準備

まず最初に位置情報を格納するデータベース（Data type)を準備します。

以下のように場所の名前、緯度（latitude）、経度（longitude）を保存できるようにします。今回は使いませんがBubbleではgeographic addressを利用することが多いのでそれも登録できるようにしています。

pluginをインストール

Bubbleのプラグイン「Mapbox Maps」をインストールします。とても残念なことに有料です。
無料のpluginで何とかしたかったのですが、、残念です。

しかし、このplugin、Zeroqodeが作成しており、レビューの評価もよかったりするので安心して使えそうです!

MapboxのAPIキーを取得+ Pluginに設定

Mapboxのウェブページに行ってAPIキーを取得します。Mapboxのサービスも有料ではあるのですが、無料枠があるのでそれを使って試していきます。

アカウントを作成するとダッシュボードページからAccess Tokenを作成できます。画面上部のTokensからも作成可能です。

取得したAccess TokenをBubbleのPlugin「Mapbox Maps」に設定してください。

Google CloudのAPI設定

場所の名称（住所や建物名）から緯度・経度を取得するためにGoogle CloudのAPI設定を行います。ここがメインではないので簡単に説明をしたいと思います。以下の手順でGeocoding APIを使うためのAPIキーを取得してください。

• Google Cloud Platformにアクセス
• 新規プロジェクトの作成（既に作成済みのプロジェクトがあればそれでもかまいません）
• 請求を設定
• 左側メニューから「APIとサービス」＞「ライブラリ」を選択し、Geocoding APIを有効化する
• 「APIとサービス」＞「認証情報」からAPIキーを作成
• 生成したAPIキーにはGeocodingを許容してください（APIの制限をする場合はGeocoding APIを許容するリストに追加

場所の名称から緯度、経度を取得するAPIを作成

Google CloudのAPIを使って場所の名称から緯度、経度を取得するAPIを準備します。

まず、API Connectorのプラグインをインストールしてください。

API Connectorで新規APIを作ります。APIは以下のような形になります。
Private keyには先ほどGoogle Cloudで作成したAPI keyを設定してください。

Initialize callを実行すると、以下のように緯度(latitude)、経度(longitude)が取得できていることがわかります。

これでAPIの準備は完了です。

画面に各要素を配置

Bubbleのエディターに戻り、以下のように各要素を配置していきます。

一番上の地図はインストールしたMapbox Mapsの地図になります。
Visual Elementsの中に「MapBox Map」があるのでそれを画面上に配置してください。

MapBox Mapの設定は以下のようにしています。Initial longitude, Initial latitudeは適当に設定してください。

選択肢に「Current geographic position’s longitude」「Current geographic position’s latitude」を選べるので現在地を表示させたい場合も簡単に設定できます。

ドラッグ出来るマーカーの表示

「マーカー表示ボタン」を押したさいにドラッグ出来るマーカーを指定した場所に表示するためのアクションを設定します。一番上の「マーカー表示」の部分です。

以下の4つのステップを設定します。

まず、他にドラッグできるマーカー（ピン）があった場合にそれを削除する処理を入れておきます。

次に作成したAPIを使って緯度、経度を取得します。
アクションはPlugins配下に作成したAPIが表示されるのでそこから選択してください。

次に地図の上にドラッグできるマーカーを表示する処理を追加します。マーカーの位置は上記ステップ２の結果から緯度、経度を取得してそれを使います。

最後にその位置まで地図の表示を移動させます。Fly To a MapBox Mapというアクションがあるのでそちらを使ってください。
この時、Zoomの数字は13-15あたりに設定しておけばいい感じかと思います。

ドラッグしたピンの位置をデータベースに保存

ドラッグしたピン（マーカー）の位置をデータベースに保存します。真ん中の「住所登録の部分です」

全体の流れはこちら。データベースに位置情報を保存して、インプットされたデータをリセットするだけです。

まず、一つ目の処理です。MapBoxMapのDraggable Markerの緯度、経度情報を取得できるのでそれをそのままデータベースに保存してください。

二つ目の処理はReset relevent inputsを設定するだけです。

データベースに登録された位置情報を表示（ピンを立てる）

最後にデータベースに登録された位置情報にピンを立てる処理を実装します。一番したの登録住所表示の部分です。

全体の処理の流れはこちらです。マーカーを追加してその場所に移動するだけです。

マーカーの追加はAdd Marker a MapBox Mapというアクションがるのでそちらを使ってください。

設定はこちら。保存した住所の緯度、経度を設定するだけです。

ピンの場所への移動も先ほど同様ですね。

はい、これで出来上がりです。

最後に

いかがでしたでしょうか。MapBoxを使うとかなりいい感じに地図を使えるようになるかと思います。

他にもデフォルトのMap機能であったり、無料のplugin Google Maps Extendedなどを使って実装も出来ますが、ピン（マーカー）をドラッグすることはできないので今回はMapBoxを使って実装してみました。

まずは、無料のプラグイン Google Maps Extendedで実装出来るかと思うのでそちらで試してもらってそれでも実装出来ないようなときにMapBoxを試してえればよいかと思います。

それでは。