Googleマップの埋め込みカスタマイズ

Googleマップのwordpressへの埋め込むときのカスタマイズ方法。

レスポンシブ対応方法

以下で記述↓

<div id=”google_map”>ここにGOOGLEマップの埋め込みコード</div>

cssに以下を追記↓

#google_map {
position: relative;
padding-bottom: 100%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#google_map iframe,
#google_map object,
#google_map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

⇒GOOGLEマップをレスポンシブに対応させる方法

マップの縮尺の変更方法

以下赤字を追記↓0〜20で調整。

<iframe src=”https://mapsengine.google.com/map/u/0/embed?mid=zQDkYJEz7XdA.kTD_fjJSFshM&z=12” width=”640″ height=”480″></iframe>

⇒Googleマップをサイトに埋め込む時に縮尺を変更する方法

座標の指定方法

以下赤字を指定↓マップで座標を検索して追記。

<iframe src=”https://mapsengine.google.com/map/u/0/embed?mid=zQDkYJEz7XdA.kTD_fjJSFshM&ll=35.991824,139.084693” width=”640″ height=”480″></iframe>

⇒マイマップの位置を指定して埋め込む