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

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

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

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

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

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

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

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

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

実装手順

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

  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による絞り込みをかけない」ことくらいです!

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

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

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

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

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

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

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