Googleマップをサイトに埋め込む方法:レスポンシブ

Programming

今回は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カレンダーも同じように埋め込むことが可能です。詳しくは以下。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました