MAP（地図機能）はいろんなアプリで使われますよね。
AdaloではGoogle Mapと連携して簡単に地図を表示することができます。
解説を動画でみたい方はこちら↓
例えばこんな感じの機能です。
よくある感じのやつですね。
上記の１枚目の画像が１つのMAP上に１つのピンがあるタイプ。
２枚目が１つのマップ上に複数のピンがあるタイプです。
それぞれ説明していきたいと思います。
AdaloのMarket PlaceからMapコンポーネントをインストール
まずはMarketPlaceかインストールしましょう。
↑こちらをタップし、
↑Mapを探し、こちらを選択します。
↑こんな感じで、コンポーネントのリストの中の「Installed」の中に表示されます。
こちらのコンポーネントを置くことでMapが使えるのですが、
その前にGoogle Map APIキーを取得しましょう。
Google Map API キーの取得
Adalo公式サイトの以下に丁寧に手順が書いてあるので、こちらでGoogleAPIキーを取得しましょう。
英語で書いてるので英語が嫌な人は拒否反応があると思いますが、
キャプチャが丁寧に貼ってあるので、Google翻訳するだけでほぼ全部わかります。
臆すことなくGoogle翻訳で立ち向かいましょう〜！
データベースの設定
作るサービスによるので、データベースは自由に作っていただいてよいのですが、
最もシンプルなサンプルを共有してみます。
お店一覧を作ってお店の場所や写真が表示されるアプリにしてみましょう。
上記のようにしてみました。
Shop Name（お店の名前）
Description（お店の説明）
Shop Image（お店の画像）
Address（住所）
日本語で住所を書くだけでMapにピンが立ちます。
簡単ですね。
↑中身はこんな感じです。
Mapコンポーネントの設定
ではいよいよMapを作っていきましょう。
左のプラスボタンからコンポーネントメニューを開き、Mapコンポーネントをドラッグして
好きな画面に置きます。
まず、Google Map API Keyのところに先程のKeyを貼ります。
次にNumber of MarkersのところはMapに「複数のピンを」 表示するならMultiple Markersに、
「１つのピン」の場合はSingle Markerを選択しましょう。
この画面は複数のお店が出てきて検索できるようにしたいので、Multiple Markerにします。
すると、複数なのでデータベースのどの値を表示する必要があるかを問われます。
なので、先程作ったShopsを選択しましょう。
Sortなどは他のリストと同じですね。
はい、これで完了です。
簡単ですね！
Previewで見てみると表示されるようになっていると思います！
Adaloでできるその他のMap機能
こちらをベースに、ピンをタップしたらポップアップが上がりお店情報が表示されたり、
「GoogleMapはこちら」のようなリンクを作るGoogleMapへ飛ばすこともできます。
その辺の挙動も今回の内容と合わせてこちらのYoutube動画で解説してるので、
そちらも見てみてください〜。