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

FacebookさえずりredditPinterestのLinkedInのmail

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

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

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

ブログでは、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マップが携帯でも正しく表示されます。

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

ワードプレスのGoogleマップを追加する

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

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

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

ワードプレスのGoogleマップを追加する

カスタム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コードの形式で追加するようにします。

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

例:

参考



4のコメント

  1. 新しい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/ 文を参考にしてください。

    応答
  2. グーグルマップを挿入するときの言語を指定する場合は、次の記事を参照してみてください:
    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/

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

    申し訳ありません。 問題が発生しました、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/ 文を参照して、問題の解決を試してみてください。

    応答

コメントを残す