1. HOME
  2. CSS
  3. Google Maps ブログに埋め込みとレスポンシブ対応

Google Maps ブログに埋め込みとレスポンシブ対応

2015年3月11日

Google Maps 地図の埋め込み方法
まずはGoogle Mapsにアクセス
https://www.google.co.jp/maps

住所もしくは地名・名称などで検索 東京駅を検索

右下の歯車のアイコンをクリック アイコン

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

「地図を埋め込む」のタブをクリック
下に表示されたURLをコピーします。 地図を埋め込む

レスポンシブ対応

html
取得した埋め込みコードをdivで囲みます。

CSSには以下の記述

margin箇所を削除すると最大幅で表示されます。
サイトに合わせて調整してみてください。

コンテンツ最大幅650px
mapsの親要素にbackground-colorとoverflow: hiddenを入れたサンプルを作成しました。
Google Mapsレスポンシブ対応サンプル


レスポンシブWEBデザイン(楽天市場)

LINEで送る
Pocket

コメントを残す





PAGE
TOP