ブログでは、Googleマップを挿入する

ブログでは、Googleマップを挿入する方法です。 ここで説明する方法は、Googleマップのサイトの 「マップを埋め込む」ページを参照しています。 この方法は、GoogleマップのAPIを登録せずに、Googleマップのサイトから地図を作成してマップを共有するコードを追加する方法です。

Googleマップをブログに追加すると、GoogleのSEOに有利に作用することができるとね。 グルメの紹介文を作成するときに、Googleマップを挿入してください。

[この記事は、2015年度に作成されたが、最新のインターフェースに合わせて完全に修正して再発行されました。 ]

ブログでは、Googleマップを追加する方法

1.まず、 グーグルマップ サイトに移動して、目的の地域を検索します。 次に、共有アイコンをクリックします。

2.共有ウィンドウが表示さ 地図埋め込み （①）をクリックして、 HTMLのコピー （②）をクリックして、共有リンクをコピーします。 その後、iframe形式で地図がコピーされます。

今のコードをウェブサイトやブログの任意の場所に貼り付けます。

反応型で、Googleマップを挿入する

画面の解像度に合わせて適切なサイズで地図が表示されるように反応型で、Googleマップを挿入するには、iframeの外部に別のclassをめぐる次のCSSで調整してくれればされます。

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?...</iframe>
</div>

次のCSSを使用します。

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* Source: ostraining

上記のように適用すると、Googleマップが携帯でも正しく表示されます。

WordPressこの方法を応用して、Googleマップを追加する方法を以下に記載されています。 同様の方法で寀ーブログに適用して反応型でGoogleマップを挿入することができます。

WordPressにGoogleマップを追加する

WordPressでは、Googleマッププラグインを使用して、簡単に地図を置くことができます。 プラグインの使用を希望しない場合は、上記のCSSコードを活用することができます。

WordPress 管理者ページ>テーマのデザイン>ユーザー定義>追加CSS上記のCSSコードを追加します。

その後、グーグルマップサイトのアドレスを検索してマップを共有するコードをコピーし、HTMLコードに追加します。 ブロックエディタでHTMLコードを追加するには、カスタムHTMLのブロックを選択します。

カスタムHTMLブロックに次のような形式でマップを共有するコードを追加します。

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.1062622773675!2d127.00489301541758!3d37.50541183538383!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca17ca5bcbcc5%3A0xe21243e195c38f39!2z7ISc7Jq46rOg7IaN67KE7Iqk7YSw66-464SQ!5e0!3m2!1sko!2skr!4v1592817756049!5m2!1sko!2skr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

今地図が反応型で正しく表示されます。

CSSコードを追加作業は一度だけとなり、Googleマップを入れるとき、上記のようなHTMLコードの形式で追加するようにします。

参考までに、いくつかの WordPress 最適化プラグインでは、サイトの速度を向上させるために子供のフレームのGoogleマップの機能を無効にするオプションを提供することができます。 地図が表示されない場合はiframeのGoogleマップの機能が無効になっていないことをチェックしてみてください。

例：

参照

• Googleマップが正しくロードされない問題が発生した場合の対処方法