Bubbleで地図アプリを作る第2回。
今回は「登録したデータを地図に表示する」ところまで進めます。

前提条件

  • 第1回で作ったDB「行き先」にデータが登録できる状態であること

  • Mapエレメントがページに配置済みであること

  • ヘッダーにハンバーガーメニューのアイコンが設置してあること

この記事でできること

  • 地図に複数のピンが立つ

  • マーカー及び、リストをクリックしたら詳細の地図がPOPUPで表示される

  • 登録された行き先を「リスト」として確認できる

地図に複数マーカーを表示しよう

1. 複数マーカーは「住所（geographic address）」でしか表示できない

Bubble標準のMapエレメントでは、複数ピン表示のときに指定できるのは 住所（geographic address） です。

注意点
GoogleMapに未登録な住所や曖昧な住所だとズレてしまうことがあります。
例：「〇〇町」だけでは正しく解釈されず、別の場所に表示される可能性がある。

2. 複数マーカーを表示する設定手順

  1. Mapエレメントを選択

  2. Number of markers →  List

  3. Type of markers →　行き先

行き先のtypesの中の住所fieldを使用します。

データベースに保存してある行き先をData souceからDo Search for で検索して指定します。

 これで、データベースに登録された住所にピンが複数立ちます。

3. 詳細な場所を表示したいときは「シングルマーカー」

1つのマーカーを表示する場合は 緯度・経度 でピンを立てられます。
例えば「マーカーをクリック → 詳細をポップアップ表示」といったUIに向いています。

👉 複数表示＝住所、詳細表示＝緯度経度、と使い分けましょう。

4. シングルマーカーをポップアップで表示する手順

  1. Popup 要素をページに追加

  2. Type of contentを「行き先」にしておきます

  1. Popup の中に Mapエレメントを配置とTextエレメントを配置。

  2. Textエレメントは「Parent group's行き先's名称」

  3. MapエレメントのNumber of markersは「Single」にしておきます

この Map の Data source の設定が大事です。

Calculate formulaを選択します。

Coordinates to Addressを選択し、
latitudeはParent group's行き先緯度、
longitudeはParent group's行き先経度を選択します。

補足. 複数マーカーを緯度経度で表示したいとき

Bubble標準ではできません。
Google Maps Extended などのプラグインを使えば、緯度経度ベースで複数ピン表示が可能になります。

こちらに関してはまた機会がありました、
使用方法を解説しようと思います。

https://bubble.io/plugin/google-maps-extended-1479901297703x967536405834891300

Group Focusにリストを表示しよう

地図にピンを立てただけでは「どんな場所が登録されているのか」一覧で確認するのは難しいですよね。
そこで役立つのが Group Focus です。ハンバーガーメニューに合わせて小さなリストを表示でき、登録済みの行き先をサッと選べるようになります。

1. Group Focusを設置する

  • Elements → Group Focus を配置

  • Reference elementを対象のアイコンに指定します
    👉 こうすることで、対象のエレメントの近くにGroup Focusが寄ります。

  • Offset top,Offset leftを数値を入れて微調整します。
    👉キーボードの上下キーで入力すると調整しやすいです。
    　 ※shiftを押しながらだと5pxづつ動きます。

2. Group Focusの仕組みを理解しよう

Group Focusは「基準要素の近くに表示されるミニウィンドウ」です。
ポップアップとの違いは ページ中央ではなく、ボタンの近くに表示できる こと。
これにより、スマホアプリのような直感的なメニューUIが作れます。

3. RepeatingGroupを設置する

  • Group Focusの中に RepeatingGroup を配置

  • Type：行き先

  • Data source：Do a search for 行き先
    👉 登録されている行き先データを自動的に一覧表示します。

  • Set fixed number of rowのチェックを外す

  • Min height of rowを0pxに
    👉 実際の高さは セルの中に配置したグループやテキストの高さ によって決まります。
    つまり「内容に応じて伸縮する」ようになります。

  • Set fixed number of columns（列数固定）

    チェックを入れて 1 に設定
    👉 一覧は縦方向に流すので、1列表示にします。

Set fixed number of rows とは？

➡️ RepeatingGroupの行数を強制的に固定する設定

行数固定の違い（簡単まとめ）

  • 固定する
    → 決めた行数ぶんの枠が必ず出る
    → データが少ないと空白が並ぶ
    → 多いとそれ以上表示できずに切れる

  • 固定しない
    → データ件数に合わせて行が自動で増減する
    → リスト表示に向いている

4. RepeatingGroupの中にグループを設置する

  • Container layoutをRowで作成

  • Type of contentを行き先、Data sourceをCurrent cell's行き先にしておきます。

Layoutについては
・Contaier layoutwをRow
・Make this element fixed-heightにチェックを入れて高さを56pxに固定

グループにアイコンとテキストエレメントを配置して
テキストエレメントにはParent group's行き先'名称を選択します。

これでグループフォーカスの中のリストの設定が完了しました。

5. ハンバーガーメニューのワークフローを設定

  • 対象のアイコンを選択してEdit workflowをクリックします。

Element ActionsからAnimeite an elementを選択
対象のElementは先程作成した「Group FocusA」を選択します。

Animationについては色々とあるので、試してみてください。
inとついているものは動きながら表示されるもの、
Outとついてるものは動きながら非表示になるものです。

6. リストのグループにワークフローを設定

  •  対象のGroupを選択→Edit workflowをクリック

  • Display dataを選択
    👉対象のエレメント（今回はPopup）にデータを飛ばすことができます。
    Element：Popup行き先
    Data to display：Current cell's 行き先

  • Show Popup:行き先
    👉作成したPopUPを表示します

  • Hide GroupFocusA
    👉表示していたグループフォーカスを非表示にします。

注意点

  • 行き先データが0件だとピンが出ないので、必ずテストデータを登録しておきましょう

  • GroupFocusは非表示にしてあげないとPopupと重なって表示されてしまいます。workflowでHideを忘れないようにしましょう。

まとめ

ここまでで、Bubbleで地図アプリを作る第2回として、次のことができるようになりました。

  • データベースに登録した行き先を地図上に複数ピン表示できる

  • マーカーやリストから選んだ1件をポップアップで詳細表示できる

  • Group Focusを使って、ハンバーガーメニューから行き先リストを呼び出せる

これで「行き先を登録 → 地図で確認 → リストから詳細を見る」という基本的なUIが完成しました。

次回（第3回）は、登録した行き先を Googleマップに連携してナビゲーションを開く方法 を解説します。アプリの実用度が一気に上がるのでお楽しみに！

次回予告

次回は、詳細ポップアップの「この場所へ行く」ボタンから Googleマップ（アプリ／Web）を自動で開き、現在地から目的地までのルート案内 を表示する仕組みを作ります。

関連記事