Bubbleのマップエレメントは使いやすく、
ピン表示や地図の見せ方は得意ですが、アプリ内ナビはできません。
プラグインを使えば経路図までは描けるものの、
音声案内や交通手段別の最適化など本格的なナビは非対応です。
そこでおすすめなのが、外部のGoogleマップを呼び出す方法。
使用感がよくスマホでもスムーズに案内できるため、
本記事では「ピン → ポップアップ → ボタンでGoogleマップ起動」という導線で、
現在地から目的地までの経路を開く実装を解説します。
この機能でできることと仕組み
できること
マップアイコン（ピン）クリックで目的地の詳細をポップアップ表示
出発地は「現在地（Current geographic position）」または、
予め登録した住所を「OptionSets」から選択ポップアップの「Googleマップで開く」ボタンで外部Googleマップを起動し、ナビ開始
初期位置やリスト選択の強調など、UIの使い勝手を改善
仕組み
Bubbleの画面から外部GoogleマップのDirections URLを生成して開きます。origin（出発地）とdestination（目的地）を埋め込むだけで、
Googleマップが経路案内を開始します。
移動手段はtravelmode（driving / walking / transit / bicycling）で切替可能。
住所でも動きますが、未登録・曖昧さによるズレを避けるため、
実務では緯度,経度の指定が安定です。
BubbleはUIとデータ選択、Googleマップは経路案内という役割分担で、
ノーコードでも高機能な体験を実現できます。
前提条件
本記事はシリーズ第3回です。
第1回で「行き先」をDBに登録できる状態、
第2回で「複数ピン表示＋リスト連携」まで完成していることを前提とします。
DBには「名称／住所（geographic address）／（推奨）緯度・経度（Number）」を用意。
ページ上にマップ要素と詳細表示用ポップアップ要素が配置済みであることを想定します。
手順
1. ピン → ポップアップ表示のワークフロー
目的：マーカー（ピン）クリックで、選択した行き先の詳細をポップアップに表示する。
Bubble操作
MAPエレメントを選択して右クリック→Start/Edit workflowを選択
WorkflowでDisplay data を選択、
Data to displayの値は「This Map's current marker」を選択Show Popupで対象のポップアップを選択します。
2. 「この場所へ行く」ボタンの設定
目的：ボタン押下で外部の Google Maps Directions を開く。
ボタンのWorkflow
Popup の「Googleマップで開く」ボタン → Start/Edit workflow
アクション：Open an external website
URLに Directions URL を組み立てて入れる（動的式）。
3-1.URLの意味
基本的には下記コードがベースとなります
https://www.google.com/maps/dir/?api=1&origin=▢▢▢&destination=△△△&travelmode=✕✕✕origin＝出発地点
destination＝目的地
travelmode＝移動手段
移動手段は下記の通り
driving（デフォルト／指定なしでも自動的にこれになる）
自動車を使った経路を表示。所要時間や距離は車移動を前提に計算される。walking
徒歩での移動経路を表示。車道ではなく歩行者用ルートが案内される。transit
公共交通機関（電車・バスなど）を利用した経路を表示。利用可能なエリアでは時刻表や乗換案内も反映される。bicycling
自転車での移動経路を表示。自転車レーンや推奨ルートが案内される。
3-2. 出発地点のデータを渡す
現在位置を渡す
origin=の後【insert dinamic data】から動的なデータを入力します。
3-3.目的地のデータを渡す
destination=の後、緯度経度をカンマ区切りで入力します。
今回はデータベースに保存していある動的なデータを【insert dinamic data】から呼び出します。
3-4. パラメータで移動手段を指定する
GoogleマップのDirections URLでは、
&travelmode=パラメータによって移動手段を切り替えることができます。
この値を変えるだけで、Googleマップが自動的にルートや所要時間、道路の種類を最適化してくれます。
travelmode の種類（Googleマップ公式仕様）
値 | 表示内容 | 説明 |
|---|---|---|
driving | 🚗自動車 | デフォルト（指定なしの場合もこれが適用）。道路経由で車移動ルートを案内。 |
walking | 🚶♂️ 徒歩 | 歩行者専用ルートを案内。歩道や横断歩道を考慮。 |
transit | 🚌 公共交通 | 電車・バス・地下鉄などの公共交通機関を利用したルートを表示。地域により対応有無あり。 |
bicycling | 🚴♀️ 自転車 | 自転車道や自転車推奨ルートを案内。 |
✅ 指定がない場合：自動的に
drivingが適用されます。
（つまり&travelmode=を省略しても車移動ルートになります）
完成版の動作確認と今後の応用
ここまでで、Bubbleから外部のGoogleマップを呼び出し、
現在地から目的地までの経路を表示する機能が完成しました。
ピンをクリックしてポップアップが開き、
「Googleマップで開く」ボタンを押すと実際にナビが始まるはずです。
開発環境ではブラウザ上で動作を確認し、
スマホ実機ではGoogleマップアプリに遷移する挙動をテストしてみましょう。
スマホでの操作感を確認することで、ズームレベルやボタンサイズなどのUI改善点も見えてきます。
この基本構成は、店舗ナビアプリ／観光マップ／営業訪問リストなど
さまざまなシーンに応用できます。
補足：Option setsを活用して設定を自動化しよう
Bubbleの Option sets は、アプリ全体で使える「固定データのひな型」です。
出発地や移動手段など、頻繁に変わらない情報を管理するのに最適です。
今回のナビ機能では、次の2つをOption sets化しておくとより便利です。
出発地（Origins）
移動手段（TravelModes）
それぞれを登録しておけば、Dropdownで簡単に選択でき、
URLに自動でデータを渡せるようになります。
🏁 出発地（Origins）のOption setを作成する
目的：自宅・学校・オフィスなど、よく使う出発地点を登録しておく。
手順
左側メニュー → Data → Option sets → New option set をクリック
名前を Origins に設定し、Createボタンをクリック
Attributes（項目） を追加
Create a new attributeをクリックし、それぞれの項目を追加します。
(A) 緯度・経度で登録する場合
lat (number)：緯度lng (number)：経度
(B) 住所で登録する場合address (geographicaddress)：住所（Googleマップに登録されている住所形式でOK）
使い分けの目安
正確な位置（駐車場・施設内・入口など）を指定したい場合 → 緯度・経度
手軽に登録して試したい場合 → 住所
New optionを追加
Createボタンをクリックして、それぞれ項目を追加します。
また、Modify attributesをクリックすることで、Displayの項目以外の入力が可能です。
使い方
Popup内にDropdownを配置し、Choices sourceを
All Originsに設定。Option captionは
Current option’s Displayにする。
✅ 現在地を選んだ場合
「Only when Dropdown 出発地選択’s value is 現在地」 の条件をつけて、URLを次のように設定
https://www.google.com/maps/dir/?api=1
&origin=Current geographic position's
&destination=Parent group's 行き先の緯度,Parent group's 行き先の経度
✅ 登録先（Option sets）を選んだ場合
「Only when 出発地選択’s value is not 現在位置」 の条件をつけて、URLを次のように設定：
緯度経度で登録している場合
カンマ区切りで緯度経度を指定します。
https://www.google.com/maps/dir/?api=1
&origin=Dropdown 出発地点を選択’s value's lat,Dropdown 出発地点を選択’s value's lng
&destination=Parent group's 行き先の緯度,Parent group's 行き先の経度
住所で登録している場合
Optionsetsに保存してあるaddressの項目を選択します。
https://www.google.com/maps/dir/?api=1
&origin=Dropdown 出発地点を選択's value's address
&destination=Parent group's 行き先の緯度,Parent group's 行き先の経度
🚗 移動手段（TravelModes）のOption setを作成する
目的：Googleマップの travelmode をUIから選択できるようにする。
手順
Data → Option sets → New option set をクリック
名前を TravelModes に設定
Attributes を追加
Display (text)：表示名（例：自動車、徒歩、公共交通、自転車）param (text)：Googleに渡すパラメータ値（driving / walking / transit / bicycling）「Add new option」で追加
使い方
Dropdownを設置し、Choices sourceを
All TravelModesに設定。Option captionは
Current option’s Display、初期値を「自動車」に設定。
Workflow内のURLには次のように追加
&travelmode=Dropdown 交通手段's value's param
これで設定は完了です！
実際に動かしてみましょう
狙い通り
出発地点はDropDownで選択した住所。
トラベルモードは徒歩で案内されました。
💡 Option setsを使うメリット
入力ミスを防止：固定値を直接選べるため、誤字やタイプミスが起きない。
アプリ全体で共通化：一度登録すれば全ページから利用可能。
データ管理が簡単：変更・追加が必要になっても一箇所で済む。
まとめ
これまで3回にわたって解説してきた【Bubble地図アプリ入門】シリーズでは、
ノーコードでもここまで本格的な地図アプリを作れるようになりました。
第1回では、地図から行き先を登録し、データベースに保存する方法を学びました。
第2回では、登録データを地図上に複数ピンとして表示し、リストと連動させる仕組みを構築しました。
そして第3回（今回）では、外部のGoogleマップを呼び出して
「現在地 → 目的地」までの経路を開くナビゲーション機能を実装しました。
これで、
ピンの設置と登録
リスト・地図の双方向連動
現在地からの経路表示
という、地図アプリの基本機能がすべて完成です🎉
さらに、Option sets を使えば出発地や移動手段を事前登録でき、
UIを少し工夫するだけで実用的なナビアプリに仕上げることも可能です。
このシリーズを通して、Bubbleで地図を扱う基礎と、
外部サービスを組み合わせて拡張する考え方を学べたはずです。
ぜひ自分のアプリに合わせて、オリジナルの地図体験を作ってみてください。
これで【Bubble地図アプリ入門】シリーズは完結です。
ここまで読んでくださり、ありがとうございました！
関連記事
【Bubble地図アプリ入門③】Googleマップ連携で現在地から目的地までの経路を表示しよう