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

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

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

カカオマップを挿入したい場合は、次の記事を参照してください。

[この記事はずっと前に書かれていましたが、最新のインターフェースに合わせて完全に修正して再発行しました。 ]

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

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

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

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

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

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

反応型で、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コードを追加します。一部 WordPress バージョンでは、「ルックス」が「テーマデザイン」に翻訳されている可能性があります。 (参考までに日本語と中国の場合、「外観」という単語に翻訳されました。

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

WordPressにGoogleマップを追加する

エレメンを使用している場合は、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マップの機能が無効になっていないことをチェックしてみてください。

例:

参照


6のコメント

  1. 場合でも、応じて、次のようなエラーが発生する可能性があります。

    申し訳ありません。 問題が発生しました、GOOGLEの地図が正常にロードされていない。 JavaScriptコンソールでの技術情報を確認してください

    この場合、 https://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 文を参照して、問題の解決を試してみてください。

コメントを残す

*メールアドレスは公開されません。