1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

駆け出しエンジニアの第一歩!Advent Calendar 2020

Day 8

HTMLでブラウザにGoogleMapを表示させる

Posted at

#はじめに
本記事は 駆け出しエンジニアの第一歩!AdventCalendar2020 8日目の記事です。
プログラミングを始めて3ヶ月の初学者ですが、アウトプットの練習も兼ねて、Qiita初投稿します。

##HTMLでGoogleMapを表示させる

####①まずはブラウザに表示させたい場所をGoogleMapで検索します
####②施設の詳細情報が表示されるので検索フォームの左側にあるハンバーガーメニューをクリックします

スクリーンショット 1.png


####③「地図を共有または埋め込む」をクリックします

スクリーンショット 2.png


####④画面中央に共有が出てくる為、「地図を埋め込む」をクリックします

スクリーンショット 3.png


####⑤「HTMLをコピー」をクリックし、コードをコピーします
#####※地図のサイズはコード左側の『中』をクリックすると「小」「中」「大」「カスタムサイズ」から変更できます

スクリーンショット 4.png


####⑥コピーしたコードをHTMLファイルに貼り付け、保存します
#####今回は「大」「中」「小」3つのサイズを貼ってみました

スクリーンショット 7 .png


####⑦ブラウザで確認すると地図が表示されます

スクリーンショット 8 .png


#最後に
今回の記事はつい最近聞いたことを参考に書きました。
まだ難しいことは書けないですが、今後も少しずつアウトプットをしていきたいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?