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 を開く。ボタンのWorkflowPopup の「Googleマップで開く」ボタン → Start/Edit workflowアクション：Open an external websiteURLに 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地図アプリ入門①】地図から行き先を登録してデータベースに保存しよう【Bubble地図アプリ入門②】地図に複数のピンを表示し、登録リストを確認しよう【Bubble地図アプリ入門③】Googleマップ連携で現在地から目的地までの経路を表示しよう