2020.3.26
html-css

googleマップをhtmlに埋め込む手順とレスポンシブさせる方法

  • HTML
  • WEB
googleマップをhtmlに埋め込む手順とレスポンシブさせる方法

htmlでgooglemapを埋め込む方法と、レスポンシブの対応について手順を説明しています。

htmlでgooglemapを埋め込む手順

  1. googlemapにアクセスして埋め込みたい住所を検索
  2. 共有というボタンから埋め込みコードをコピー
  3. コピーしたコードを表示させたい部分に貼り付ける

まずはgooglemapにアクセスして埋め込みたい住所を検索します。
共有というボタンがありますのでクリックすると、そこに「地図を埋め込む」があります。

googleマップをhtmlに埋め込む手順とレスポンシブさせる方法

 

そこからHTMLがコピーできますので、そのまま表示させたい場所にコードをコピペすれば完了です。

googleマップをhtmlに埋め込む手順とレスポンシブさせる方法

 

左側のプルダウンメニューから表示サイズを選ぶこともできます。

 

小がwidth=”400″ height=”300″

中がwidth=”600″ height=”450″

大がwidth=”800″ height=”600″

です。
カスタムサイズから、任意のサイズをカスタムすることも可能。

 

レスポンシブ対応させるには、widhtを100%にしてあげればOKです。

 

 

以上、htmlでgooglemapを埋め込む方法でした。よかったら参考にしてください。

Share Please

Read this too