「自分のWordPressにGoogleMapを埋め込みたいけど、レスポンシブ化ができない！」と悩んでいませんか？
GoogleMapの埋め込みコードをそのままコピペしても、スマートフォンで見た時に横幅が合わずにサイトのレイアウトが崩れてしまいます。
そこで、今回は初心者でもコピペだけでWordPressにレスポンシブ化されたGoogleMapを埋め込む方法をご紹介いたします。
目次
WordPressにGoogleMapを埋め込む方法
それでは実際にGoogleMapの埋め込み作業を進めて行きましょう。プラグインを使わなくてもとても簡単にGoogleMapをサイトに埋め込むことが可能です。
GoogleMapにアクセスをする
まずはGoogleMapのサイトにアクセスしましょう。
埋め込みたい場所の住所を入力する
GoogleMapのサイト上部にある検索窓に住所を入力しましょう。
GoogleMapの埋め込みコードを取得する
- 住所を入力したら、「共有」アイコンをクリックしてください。
- 「地図を埋め込む」をクリックしてください。
- 「HTMLをコピー」をクリックして埋め込みコードをコピーしてください。
これで埋め込みコードを取得することができました。
WordPressにGoogleMapの埋め込みコードをペーストする
ご自身のWordPressサイトの表示させたいところに埋め込みコードをペーストしましょう。下記マップは上記手順にて埋め込んだGoogleMapの例になります。
WordPressに埋め込んだGoogleMapをレスポンシブ化させる方法
それでは次に先ほど埋め込んだGoogleMapをレスポンシブ化させていきましょう。
HTMLを追加する
まずはHTMLのソースを編集します。
GoogleMapの埋め込みコードの前後に<div>を追記します。
↓編集前の埋め込みコード↓
|
1 |
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.82803038483!2d139.76493075176208!3d35.681236180097045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1546844939783" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> |
↓編集後の埋め込みコード↓
|
1 2 3 |
<div class="googlemap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.82803038483!2d139.76493075176208!3d35.681236180097045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1546844939783" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> |
CSSを追加する
それでは続いてCSSを追記していきます。CSSを反映したらGoogleMapのレスポンシブ化が完了します。
追記するCSSは下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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%; } |
CSSを追記する場所はWordPress管理画面の「外観」内にある「カスタマイズ」をクリックし、「追加CSS」欄になります。
まとめ
GoogleMapの埋め込みには出発地から目的地までの道順を埋め込むことも可能です。GoogleMapをサイトに埋め込んで、お店の集客力を高めましょう。
