脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

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

f:id:yuka-edu:20210613205240p:plain

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

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

 

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

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

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

 

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

googleマップの設定方法 

 

地図情報の取得 

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

f:id:yuka-edu:20210613203941p:plain

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

f:id:yuka-edu:20210613211359p:plain

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

f:id:yuka-edu:20210613211431p:plain

Adaloでの設定

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

f:id:yuka-edu:20210613211543p:plain

f:id:yuka-edu:20210613211601p:plain

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

f:id:yuka-edu:20210613212623p:plain

Step3

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

f:id:yuka-edu:20210613212840p:plain 

Preview

画面右上の▶︎Previewを選択

ドキドキ・・・・

・・・

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

f:id:yuka-edu:20210613212940p:plain

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

f:id:yuka-edu:20210614174142j:image

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

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

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

まとめ 

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

 

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

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