【Bubble】マップ上に該当データのマーカー(ピン)を立てる方法

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

こんにちは!EPICs合同会社です!

今回はノーコードツール「Bubble」で「マップ上に該当データのマーカー(ピン)を立てる方法」をお伝えしていきます!

データベースに登録したデータを抽出して、マップにマーカーを立てたい!という要望はよくあるかなと思うので、是非覚えていただければと思います!

動画解説バージョンはこちら!

目次
無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ
【一分で完了】資料をダウンロード

実装イメージ

今回は観光地と観光地の所在地をデータに登録し、該当の観光地がマップ上に表示されるよう実装します!

実装手順

以下の手順で実装します。

  1. データベースの準備
  2. Mapの配置と設定
  3. Work Flowの設定

データベースの準備

まずはMap上に表示させたいデータを登録していきます。

今回は「tourist spot」というデータに「geographic adress型」で「adress」という所在地を登録するデータベースと「text型」で「name」という観光地の名前を登録するデータベースを準備しています!

Mapの配置と設定

データの準備ができたらページ上にMapを配置します。

Mapのデータ設定は下記のように行いましょう!

重要な各項目の設定内容と概要はこちらになります!

項目名設定内容本実装での設定
Number of markersマーカを何個表示させるか
(非表示/単数/複数)
List(複数表示設定)
Type of markersマーカーとして表示させるデータtourist spot
Adress field引っ張ってくる住所データの格納先adress
Show title windowタイトルを表示させる設定
(非表示/クリックしたら/常に表示)
on click
Marker captionタイトル表示の際、
何のデータを表示させるか?
current markers’s name
set center and zooming manuallyマップを表示した際、
どこを中心として表示させるか
current user’s adress

ほかにも設定を加えている部分はありますが、一旦上記の部分の設定ができればいいと思います!

あとはお好みで設定を加えてみましょう!

これでデータベースに登録されている情報をMapに表示する方法は以上です!

おまけ-検索機能の追加-Work Flowの設定

最後にMapに表示されているデータの検索機能を付け加えてみましょう!

まずはページ上に検索ボックスを配置します!

次にページ全体にWork Flowを加えていきましょう!

Work Flowを開いたら、「Click here to add an event」→「Elements」→「An input’s value is changed」を選択します。

すると下記のような画面になるので、「element」→「input」を指定し、only whenを追加します。

まずはinputに何かしらの文字が入力されているパターンのWork Flowが作ります。

その場合はOnly whenは下記のように設定しましょう!

This input's value is not empty

Step1では「Element action」→「Display Markers」を選択し、マーカーの絞り込み設定を行っていきます。

次に下記のような画面になるので、画像のように検索したテキストに該当するデータだけ表示がされるようにしましょう!

これで検索ボックスにテキストが入力されている際の設定は完了です!

最後に同じような要領で検索ボックスにテキストが入力されていない時は全てのデータが表示される設定をしていきましょう。

違いは、Only whenの部分を「This input’s value is empty」にすることと、「Do a Search for」の時に「inputによる絞り込みをかけない」ことくらいです!

下記の画像を参考にしてみてください!

これで今回の解説は以上です!

ここまでの実装が反映されているかプレビューで確認してみてください!

いかがでしたでしょうか?

本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

    氏名

    法人名

    メールアドレス

    電話番号

    お問い合わせ詳細 ※分かる範囲でご記入ください

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次