今回はHTMLを使って、WEBサイトに指定したGoogleマップを埋め込んで表示させる方法について説明していきます。
自社サイトの会社概要などにGoogleマップの会社住所などを載せれば信頼性アップに繋がります。また個人ブログなどでおすすめのスポットなどを紹介する場合、Googleマップで詳しい場所まで載っけてくれたら親切だと思うので、両者ケースの何も覚えておいて損は無いので是非参考にしてみて下さい。
サイトにGoogleマップを表示させる方法
今回は代官山にある『蔦屋書店』を手本に表示させていきながら説明していきます。
Googleマップで指定の場所を検索
まず初めに、Googleマップで指定の場所を検索します。
マップを共有する
次に情報の右にある『共有』をクリックします。
ここではTwitterやFacebookでマップを共有することができます。そしてHTMLでWEBサイトにも共有、掲載することが可能となっています。
コードをコピペする
先ほどの共有画面の右の『地図を埋め込む』をクリックします。そこにあるHTMLをコピーしときます。またマップの大きさもここで変更します。
上記でコピーしたHTMLを表示したい場所にペーストします。
レスポンシブ （画像幅によって自動でサイズ調整）にしたい場合、div要素で囲ってクラスを作成してから以下のCSSのように記述して下さい。
.Gmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Gmap iframe,
.Gmap object,
.Gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}上記のCSSで表示が崩れた場合は下記のCSSを試してみて下さい。
@media (max-width: 767px) {
.Gmap {
position: relative;
padding-bottom: 90%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Gmap iframe,
.Gmap object,
.Gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}ワードプレスの場合は、投稿ブロックの『カスタムHTML』を使い、ここに先ほどのHTMLをペーストして下さい。
↓埋め込んだマップは以下のように表示されます。↓
以上が「Googleマップをサイトに埋め込む方法：レスポンシブ」でした。
非常に簡単なので、マップで位置を見せたい場合は是非活用してみて下さい。
Googleカレンダーも同じように埋め込むことが可能です。詳しくは以下。
