ブログでは、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のマップAPIの標準プランに基づいて2016年6月22日以降に作成されたすべての新規アプリケーションでは、Google Maps APIキーが必要です。 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/ 文を参考にしてください。
グーグルマップを挿入するときの言語を指定する場合は、次の記事を参照してみてください:
https://www.thewordcracker.com/miscellaneous/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EA%B5%AC%EA%B8%80%EB%A7%B5%EC%9D%84-%EC%82%BD%EC%9E%85%ED%95%A0-%EB%95%8C-%EC%96%B8%EC%96%B4-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0/
場合でも、応じて、次のようなエラーが発生する可能性があります。
この場合、 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/ 文を参照して、問題の解決を試してみてください。