GoogleMapをレスポンシブでサイトに埋め込む方法。

WEB制作、マーケティングに関する情報をお届けします。

GoogleMapをレスポンシブでサイトに埋め込む方法。

2016.07.23

カテゴリ：WEB制作

タグ：

ホームページ制作

サイト作成ではかなりよく使われるGoogleMapをサイト幅に合わせてか可変（レスポンシブ）で埋め込む方法です。
たまにGoogleMapのバージョンアップがあるの設置までのステップが変わってきますが今回は2016年7月現在の最新の設置方法です。

インデックス

1.GoogleMapで場所を決める
2.埋め込みコードを取得
3.貼付ける
4.まとめ

1.GoogleMapで場所を決める

GoogleMapにアクセス→設置したい場所をクリックしてピンを立てる→下の詳細をクリッ→左側のハンバーガーメニューをクリック

2.埋め込みコードを取得

地図を共有または埋め込む→地図を埋め込むの順にクリックして中のコードをコピーします。

3.貼付ける

下記のようにコピーしたiframeをdivで囲んでHTMLに貼付けてCSSでレイアウトするだけです。

HTML

<div class="gmap">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1619.99681080753!2d139.76233115807088!3d35.70177457317795!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c183b0cc7d9%3A0xd1388983532a26eb!2z44CSMTEzLTAwMzQg5p2x5Lqs6YO95paH5Lqs5Yy65rmv5bO277yR5LiB55uu77yVIOmItOacqOeroOWkq-iomOW_teism-Wggg!5e0!3m2!1sja!2sjp!4v1469240493093" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

</div>

CSS

.gmap{
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.gmap{

position: relative;

padding-bottom: 75%;

height: 0;

overflow: hidden;

}

.gmap iframe,

.gmap object,

.gmap embed{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

4.まとめ

上記のように簡単に設置は出来ますが、たまにGoogleMapはアップデートがあるのでコードの取得までのステップが変わる場合があります。

WEB制作、マーケティングに関する情報をお届けします。