こんにちは！EPICs株式会社です！
今回はノーコードツール「Adalo」を使用して、「マップ上に複数のピンを立てる」、また「ピンの位置に含まれている情報を表示する」方法を解説していきます！
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
今回は、東京の観光地の「名前」「所在地」「説明文」「画像」をデータベースに格納し、
所在地データ引っ張ってMap上に表示。
ピンをクリックすると該当のデータが表示されるようにしています。
実装手順
以下の手順で実装します。
- データベースの用意
- Mapのインストールと配置
- Mapの設定
- 詳細データ表示用Modalの設定
データベースの用意
まずはMap上に表示させるデータを用意しましょう！
今回は下記のデータを使用しています。
Mapにピンを表示させるのみであれば、「adress」というデータベースの中にある「所在地情報」が登録されていれば問題ないです！
Mapのインストールと配置
データの準備ができたら「Market place」で「Map」をインストールしましょう！
インストールができたら「installed」の中から「Map」を選択してScreen内に配置をしましょう！
Mapの設定
次に設置したMapにデータの表示設定をしていきましょう！
注意点は、「Google Maps API Key」の設定と「Number of Markers」になります！
Google Maps API Keyの取得方法はこちらをご参照ください。
※リンク部はAdalo内の公式ドキュメントを指定しています。
「Number of Markers」は、「Single Markers」にするをピンが一つのみ表示されるようになり、「Multiple Markers」にするとピンが複数立てられるようになります！
今回は下記のように設定をしました。
「Single Marker」にする場合はこちらを変更しましょう！
これでデータの表示設定ができたら、ピンをクリックしたい際のアクションを設定をします。
「Marker」部を選択「ADD ACTION」→「Link」→「New Screen」→「Modal」を選択しましょう。
「Modal」を表示する際の「Transition」は「Modal」を設定するといいと思います。
Map側の設定は以上です。
詳細データ表示用Modalの設定
最後に詳細データ表示用Modalの設定をしましょう！
Mapの一番下にModalを表示させたいので、下記の画像のように最下部にRectangleやその他の要素を置いています。
「Modal」の中には観光スポットの「Name(名前)」「所在地(adress)」「description(説明文)」「image(画像)」が表示されるようになっていますが、それぞれの設定下記です！※シンプルな内容ですが、一応載せておきます！
これですべての設定が以上です！
最後に検証をしてみましょう！
いかがでしたでしょうか？
本記事が少しでも開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
