【Adalo】地図が表示できるMAPコンポーネント設定方法

当ページのリンクには広告が含まれています。

ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。

Adalo(アダロ)は、プログラムコードを知らなくてもアプリ製作が可能なツールです。

Adaloで作るアプリに地図を表示したい時があるかもしれません。

そんな時に使える「Adaloに地図を表示できるMAPコンポーネント」を紹介します。

Adalo

Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/

Adaloを使用するには登録が必要です。

登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面

Map(地図)コンポーネント

Adaloには、いろいろなコンポーネントがあります。

その中に、MAP COMPONENT(地図コンポーネント)があります。 

Mapコンポーネントは、左サイドバーのMarketplaceの中にあります。

(Mapコンポーネントは、最初から表示されているわけではありません。)

左サイドバーをスクロールして、MarketplaceのEXPLORE MARKETPLACEをクリックします。

クリックするとMarketplaceが開き、コンポーネントが表示されます。

画面をスクロールしていくとMapがあります。

インストールをクリックして、DONEをクリックします。

左サイドバーのインストールにMAPコンポーネントが追加されます。

マップをクリックして、スクリーンの入れたい部分に移動させます。

マップをスクリーンに追加します。

追加したマップは画像サイズを変えれます。

マップサイズを調整します。

Mapコンポーネント設定

次に、マップの設定を行います。

Adaloは、Googleマップを使用します。

マップはGoogleマップを使用するためGoogleマップAPIキーを取得します。

Googleの開発者サイトにて、Google Maps APIのキーを取得する必要があります。
⇒ https://developers.google.com/maps/documentation/javascript

Google Map PlatformのGo to Consoleをクリック。
Google Maps Javascript APIのキーを取得する
APIコンソールで各種設定。

APIキー取得、設定はAdalo公式ページのリンクを確認してください。
⇒ https://help.adalo.com/component-basics/marketplace-components

APIの無料トライアルにアクセスするには、クレジットカードを登録しておく必要があります。(同意なしにカードへの請求を開始することはありませんが、登録は必要です)

Google APIキーをコピーして、マップコンポーネントのAdaloの左側のパネルに貼り付けます。


マップコンポーネントのNumber of Markersでは、マーカーの数を選択します。

マーカー表示設定を行えます。

  • Singli Marker:シングルマーカー
  • Multiple Markers:複数のマーカー


Makers Addressにマークするアドレスを入力します。

マーカーのアドレスを入力します。

オプションで、マーカーにアクション(クリックした時のアクション)を追加することもできます。


Map Styleではマップの表示方法を変えれます。

  • Roadmap:ロードマップ
  • Hybrid:ハイブリッド
  • Satellite:衛星
  • Terrain:地形


マップデザインの変更ができます。

上記の画像はハイブリッドです。


Custom Style JSONは、カスタムJSONを追加してマップのカスタマイズができます。

座標と名称の掲載されたjsonデータを読み込み、地図用にマーカーを配置します。


一番下は現在地の表示です。

Show Current LocationをONにすると現在地を表示します。

設定したら、プレビューで確認してください。

まとめ

Adaloのアプリでは、Google マップを使用することができます。

Mapコンポーネントを使用するには、左サイトバーのマーケットプレイスからインストールを行います。

※マップを使用するには、Google マップのAPI取得が必要です。

Google マップのAPIは、無料で取得することができますが、クレジットカードの登録が必要になります。(手動でアップグレードしない限りは課金されません。)

AdaloでMapを使用するのは少し手間がありますが、Google マップを使用することが可能です。


今回は、「AdaloのMap(地図)コンポーネント」を紹介しました。

ノーコードツールのAdaloを使用する時の参考になればと思います。

⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのナビゲーションコンポーネント
⇒ YouTubeを表示するコンポーネント




スポンサードリンク



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です