簡単にgoogleマップを設定｜初心者のアプリ開発｜Adalo

アプリを作ってみたら、地図を載せたくなりますね。

今日は簡単にgoogleマップを表示させる方法を紹介します。 

標準で用意されているMapコンポーネントを使おうとすると、Googleに色々と登録が必要で、「無理だ〜！」と諦めかけたのですが・・・

Web viewコンポーネントでiframeタグを簡単に埋め込めることがわかりました。

サクッと、設定していきます。

この記事を読むとわかること・・・

・googleマップの設定方法 

地図情報の取得 

Step1

1. パソコンのgoogleマップで目的地を検索
2. 画面左の「共有」をクリック

Step2

1. 地図を埋め込むをクリック

Step3

1. HTML をコピーをクリック

Adaloでの設定

Step1

1. 画面左上の「＋」を選択
2. コンポーネント一覧の「Simple」を選択
3. 「Web View」を選択
4. 「Web View」を右側の画面に配置

Step2

1. URLにコピーしたHTMLを貼り付け
2. src="https〜" のダブルクォーテーションで囲まれているURLのみ残す

Step3

不要なURLがなくなったので、プレビューしてみましょう！

 

Preview

画面右上の▶︎Previewを選択

ドキドキ・・・・

・・・

ん？なんだが細長い・・・スマホ向けのサイズですね。

少しサイズを変更してみました。

無事に地図を表示できました〜！

もし、ルートの線を出したいなど細かい要望がある場合はMapコンポーネント必要かなぁと思います。

でも、地図を表示させたいだけなら、これで十分ですね！

まとめ 

今日はあるとgoogleマップの表示を試してみました〜！

埋め込みiframeタグは他にも活用できたりします。

youtubeやgoogleカレンダーも今回の応用で表示させられるので、挑戦してみてくださいね。

▽ NoCodeアプリ Adalo

www.adalo.com