Bubbleで地図機能をもったアプリを作ってみたいと思ったことはありませんか？
この連載では、初心者でも一歩ずつ進められるように、地図アプリを作る流れを3回に分けて解説します。

最終的には「地図に行きたい場所をピンで登録できるアプリ」が完成し、さらに「外部のGoogleマップに飛ばして経路案内できるアプリ」まで発展させることができます。

今回の第1回では、地図をクリックして行き先をデータベースに登録する方法を解説します。住所入力ではなく、実際の地図から緯度経度を取得して保存するので、より正確で実用的な仕組みを体験できます。

前提条件

このチュートリアルを始める前に、以下の準備ができていることを前提とします。

  • Google Maps APIキーを取得してBubbleに設定していること

    Bubbleの「Settings」→「API」タブに入力

    Google Cloud Platformで Maps JavaScript API と Geocoding API を有効化しておく

  • Bubbleのアカウントを作成済みであること

    無料プランでもOK

  • InputやButtonなど基本的なUI要素を置ける程度の操作ができること

👉 今回は「地図をクリックして地点を登録」する機能を作ります。Google Maps APIの設定がまだの場合は、先に済ませてから読み進めてください。

この記事でできること

今回のゴールは、地図の中心座標（緯度・経度）を取得し、データベースに登録できるようにすることです。
ユーザーは地図をドラッグして中心を合わせ、「登録する」ボタンを押すだけで、地点を保存できます。

データベースを作成しよう

まずは、行き先を保存するデータベースを作ります。

  1. Dataタブを開く

    Bubbleの左サイドバーから「Data」を選びます。

  2. 新しいデータタイプを作成

    「New type」をクリックし、「行き先」と入力

  3. フィールドを追加

    住所  (geographic address)
    名称（text）

    経度（number）
    緯度（number）

👉 このデータベースに「地図の中心座標」が保存されていきます。

画面のレイアウトを整えよう

1. グループのレイアウトを Align to parent に設定する

まずはMAPを設置するグループのContainer layoutを Align to parent にします。
これで要素を中央に固定したり、重ねて配置できるようになります。

2. マップの中央に十字アイコンを配置する

ページに Map要素 を配置し、その上に「＋」のアイコンを重ねます。
水平方向・垂直方向を「中央揃え」にすることで、常にマップの真ん中に表示されます。

3. 下部に登録フォームとボタンを置く

画面の下にContainer layout Rowでグループ化した
 Input（名称入力用） と ＋ 登録ボタン を配置し
Parent container typeで位置を設定します。

これで「中心の十字で場所を決めて、名称を入力して登録する」というUIが完成します。

登録ボタンでデータを保存しよう

1. ワークフローを作成

  • 「＋ 登録」ボタンをクリック
    → Edit workflowボタンを押下

2. 新しいデータを作成

  • Action → Data (Things) → Create a new thing を選択

3. フィールドに値を入れる

  • 住所 → Map A’s Center address

  • 名称 → Input 名称’s value

  • 経度 → Map A’s Center address’s:longitude

  • 緯度 → Map A’s Center address’s:latitude

💡 Tips：住所だけでなく「緯度・経度」を保存しよう

Bubble では「住所（geographic address）」も保存できますが、地図の表示や外部のGoogleマップ連携では緯度・経度を使う方が正確です。

  • 住所だけ保存する場合の弱点

    Googleマップに登録されていない住所だとズレてしまう

    同じ住所でも解釈が複数あり、意図しない場所が表示されることがある

  • 緯度・経度を保存するメリット

    どんな場所でも「一点の座標」として正確に扱える

    地図上のピン位置と完全に一致させられる

    GoogleマップへのURL渡しでも安定して動作する

👉 だからこそ「名称＋緯度＋経度」をセットで保存しておくことが大事です。

４． アラートを表示しよう

  • 事前にページに Alert要素 を配置しておきましょう。

  • ワークフローで Show message in Alert を追加します。

  • 「Change the alert message」にチェックを入れて、メッセージを設定します。

👉 ユーザーが「登録できた」とわかる安心感を与えられます。

５． フォームをリセットしよう

  • ワークフローの最後に Reset inputs を追加

  • 保存が終わったら入力欄が自動でクリアされます

動作確認

  • プレビューを開き、地図を動かして「＋ 登録」を押す

  • Data → App data で新しい行き先が保存されていることを確認

補足：入力が空のときは登録できないようにする

ユーザーが名称を入力していないのに登録できてしまうと、データベースに「空の名称」がたまってしまいます。
そこで、Input 名称が空のときはボタンを押せない設定を加えておくと安心です。

設定方法

  1. 「＋ 登録」ボタンを選択 → Conditional タブを開く

  2. 新しい条件を追加し、
    Input 名称’s value is empty
    を指定

  3. このとき This element isn’t clickable にチェックを入れる

  4. 背景色をグレーに変更すると「押せない感」がわかりやすい

まとめ

ここまでで、

  • 地図の中央に十字を配置

  • 名称を入力するフォームと登録ボタンを設置

  • ボタンを押すと、地図の中心の緯度・経度＋名称 がデータベースに保存される

という仕組みが完成しました。

これで第一回のゴール“地図から行き先を登録”が達成できました！

次回予告

次回の記事では、今回登録したデータを リスト化して表示し、地図にピンを立てる方法 を解説します。
これで「登録したものが見える」ようになり、アプリが一気に便利になります。

関連記事