GoogleMapの地図をレスポンシブにサイト埋め込みする方法

2018年3月12日2022年6月4日

こんにちは！会社の所在地や飲食店の所在地を分かりやすく説明するには「GoogleMap」ですよね？

また最近では「スマホサイト」と「PCサイト」を分けるためレスポンシブサイトにすることは必須の条件になっています。

今回はGoogleMapをレスポンシブサイトに埋め込む方法を紹介します。

基本はコピペでOKにしておきましたのでそのまま使用してください。

表示させたい地図の情報をGoogleMapから取得

まずはGoogleMapから取得した地図情報を取得します。

GoogleMapから地図情報を取得する方法は大きく分けて、

既にある地図情報使用する
建物情報のない地図を取得する

になります。では、それぞれの方法を解説します。

既にある地図情報を使用する

GoogleMapで所定の場所を検索します。※今回は東京駅で試してみます。

そして赤枠のメニューボタンを選択します。

次に赤枠の「地図を共有または埋め込む」を選択します。

すると↓の画面が表示されます。

赤枠の「iframe」のURLをコピペすれば地図情報をHTMLに張り付けることができます。

赤枠のプルダウンリストの中からカスタムサイズを選択すれば、自分のサイトに合わせてGoogleMapのサイズを変更できます。

建物情報のない地図を取得する

基本的な手順は全く一緒になります。↓の赤枠①で対象の場所をクリックして選択。

その後赤枠②の緯度・経度が表示されるのでクリックします。

あとは「既にある地図情報を使用する」場合と同様の手順を実施します。

HTMLにGoogleMapの情報を埋め込む

↑でコピーしたifraemのURLを↓のようにペーストします。

<div class="googlemap">
<iframe コピペしたGoogleMapのiframeソース></iframe>
</div>

↓が東京駅の例です。

<div class="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.830828865216!2d139.76486291529426!3d35.68116728019424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1520862821881" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

CSSでGoogleMapを見やすい形に整える

CSSファイルに↓の内容を追記します。

WordPressの場合は「Simple Custom CSS and JS」を利用することをオススメします。

.googlemap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

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