WordPressのGoogle Mapsをサイトに埋め込む方法をお探しですか？

WordPressの多くの機能と同様に、Google Mapsをサイトに埋め込むには、地図コンテンツの種類に応じていくつかの方法があります。 次に、Googleマップを埋め込むのに役立つプラグインをいくつか紹介し、その方法を取ることの利点を説明します。

最後に、WordPress で Google Maps を使用する際のパフォーマンスに関する考察と、Google Maps を埋め込む必要がある場合でも WordPress サイトの読み込みを高速に保つためのヒントをご紹介します。

• Google Maps APIが必要になりました
• プラグインなしでWordPressにGoogle Mapsを追加する方法
• より柔軟性のあるWordPressのGoogle Mapsプラグイン
• Google Mapsのパフォーマンス効果とパフォーマンスを向上させるためのヒント

Google Maps APIが必要になりました

6月11日より。 2018年、Google MapsにAPIキーが必要になりました。 すでにサイトにGoogle Mapsを導入しているのに、動作しなくなったという方は、これが原因かもしれません。 というか、APIキーが足りないのです。 朗報は、99%の方にとっては、まだ無料のはずです。

Google はまた、使用料を相殺するために、毎月定期的に請求アカウントに $200 のクレジットを付与しています。

他に何か変わったことはありますか?

1. Google Cloud Platform Console アカウントにサインアップして設定します。
2. 請求書が発行されることはないかもしれませんが、請求先情報を追加します。
3. Google Maps の埋め込みコードまたはプラグインの設定に API キーを追加します。

Google Maps API キーの取得方法

以下に Google Maps API キーの取得方法を示します。

ステップ 1

Google Cloud Platform Console にアクセスします。

Step 2

プロジェクトを選択または作成します。

Step 3

請求先アカウントを設定します。

ステップ 4

1つまたは複数の製品を選択するように求められます。 これは、使用しているマップのタイプによって異なります。 たとえば、プラグインを使わずに WordPress サイトに地図を埋め込む場合 (さらに以下のステップで示すように)、Google Maps Embed API を選びます。

Google Maps Widgetのようなプラグインを使用している場合（以下の手順を参照）、Google Maps Static APIを選択します。

サードパーティ製のプラグインやテーマを使用している場合は、どのタイプの Google Maps 展開を使用しているかのドキュメントがあるはずです。

ステップ 5

「有効にする」をクリックします。”

Step 6

「APIs」をクリックして、「Credentials」の下にAPIキーが表示されます。

ステップ 7

Google Maps API キーを単純に埋め込んだ場合、ソース コードにプレーンテキストで表示されます。

これを行うには、API キーの名前をクリックすると、制限を追加することができます。 WordPressサイトの場合は、HTTPリファラーを追加するだけで十分です。 例えば、https://yourdomain.com/*のように。 これにより、あなたのウェブサイト上でのみ通話ができるようになります。

How To Add Google Maps In WordPress Without A Plugin

シンプルな地図を埋め込みたいだけで、カスタムロケーションマーカーやその他の注釈のような詳細な機能を必要としない場合は、プラグインなしでGoogle Mapsを埋め込むことができます。 プラグインを使用せずに、日常的に使用している Google マップのウェブサイトを使用して、Google マップを埋め込むことができます。

仕組みは以下のとおりです。

Step 1: Google Maps の埋め込みコードをコピーする

まず、Google Maps のウェブサイトを使用して、埋め込みたいマップを作成します。

例えば、場所のマーカーを埋め込みたい場合は、その場所をGoogleマップで開き、道案内を埋め込みたい場合は、道案内をGoogleマップで開きます。

埋め込みたい地図ができたら、左上のハンバーガーメニューをクリックします：

メニュー項目のリストで、「共有」または「地図を埋め込む」のオプションを選択します。

そうすると、「共有」のポップアップが表示されます。

そのポップアップで、「地図を埋め込む」タブをクリックします。

その後、ドロップダウンで希望のサイズを選択できます。 ほとんどの WordPress サイトでは、デフォルトのサイズで問題ありませんが、必要に応じてマップを大きくしたり小さくしたりすることができます。

それができたら、「Copy HTML」ボタンをクリックして、埋め込みコードをコピーします。

そして、API キーをコードに追加する必要があります。

<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&parameters allowfullscreen></iframe>

Step 2: Google Mapsの埋め込みコードをWordPressサイトに追加する

あとは、埋め込みコードをWordPressサイトの地図を掲載したい記事やページに追加するだけです。

WordPress 5.0でリリースされた新しいWordPress Gutenbergブロックエディタを使用している場合は、カスタムHTMLブロックを追加して、埋め込みコードをブロックに貼り付けることで行えます。

ブロックの上にあるPreviewボタンをクリックすると、マップがどのように表示されるかプレビューできます。

従来のTinyMCEエディタを使用している場合は、「テキスト」タブを開いてコードを貼り付けることで、Googleマップの埋め込みコードを追加することができます。

コードを追加したら、Visualタブに戻ってマップのライブプレビューを見ることができます。

以上で完了です。

Use Google My Maps To Embed More Complicated Maps Without A Plugin

複数のロケーション マーカーやカスタム アノテーションなど、よりクリエイティブなものを作りたい場合は、Google の My Maps サービスを使えば、プラグインを使わずに実現できます。

マイマップは Google の公式ツールで、独自のカスタム マップを作成して共有することができます。これを使えば、たくさんのカスタム マーカーと、ユーザーがマーカーをクリックしたときに表示されるカスタム情報を使って、以下の例のようなものを作成することができます。

ステップ1：Googleマイマップで地図を作成する

まず、Googleマイマップにアクセスして、新しい地図を作成します。

ここではあまり詳しく説明しませんが、このインターフェイスを使用すると、かなりクリエイティブなマップを作成することができます。

ステップ 2: 埋め込みコードを生成する

マップの作成が完了したら、埋め込みコードを生成する必要があります。

ただし、コードを取得する前に、まずマップを公開する必要があります。 そのためには、「共有」ボタンをクリックします。

続いて、「オン – ウェブ上で公開」を選択し、「保存」をクリックします。

それができたら、マップのタイトルの近くにあるドロップダウン メニューをクリックし、[Embed on my site] を選択して実際の埋め込みコードを生成します。

コードのポップアップが表示されるので、コピーしてください。 APIキーを追加するのを忘れないでください。

ステップ3：WordPressサイトに埋め込みコードを追加する

あとは、通常のGoogleマップのウェブサイトから取得した埋め込みコードと同じように、WordPressサイトに埋め込みコードを追加していきます。

その方法がわからない場合は、ここをクリックして、上のチュートリアルのセクションにジャンプしてください。

Use A WordPress Google Maps Plugin Instead

上記の手動の方法以外にも、自分のサイトに地図を埋め込むのに役立つ WordPress Google Maps プラグインがたくさんあります。

これらのプラグインを手動の方法よりも検討したい理由はいくつかあります。

• シンプルなインターフェイスでより複雑なマップを作成できます。
• いくつかのプラグインは WordPress にリンクしています。例えば、マップマーカーを WordPress の投稿にリンクすることができます。
• いくつかのプラグインは、Google マップのパフォーマンスを最適化するのに役立ちます（詳細は後述します）。
  ダウンタイムやWordPressの問題に悩んでいますか？ Kinstaはあなたの時間を節約するために設計されたホスティングソリューションです! 機能をチェックする

  Google Maps Widget

  Google Maps Widgetは、Google Maps Static APIを使用して地図を埋め込むことができるシンプルなGoogle Mapsプラグインです。このプラグインは、インタラクティブな地図ではなく静的な画像を埋め込むことで、よりパフォーマンスに優れたアプローチを提供します（この点については次のセクションで詳しく説明します）。 有効化したら、Google Maps API キーを取得して、プラグインの設定に差し込む必要があります。 サイト内の任意のウィジェットエリアにGoogle Mapを追加することができます。

  

  Google Maps Widget interface

  必要に応じてインタラクティブなマップをすぐに使用することもできますし、Proバージョンではショートコードを使ってサイトのどこにでもマップを埋め込むことができます。

  Google Maps Easy

  Google Maps Easy では、独自のマーカーや注釈を付けたカスタム マップを作成できます。

  マーカーを追加する際には、独自のカスタム アイコンをアップロードしたり、マーカーの説明にテキストや画像を含めたりすることができます。

  

  Google Maps Easy interface

  地図を作成したら、ショートコードまたは PHP 関数を使用して埋め込むことができます。

  Intergeo

  Intergeoは、カスタム マーカーを使用して独自の地図を作成したり、地図の機能をコントロールしたりできる、もうひとつの人気のあるオプションです。

  プラグインをインストールして有効にすると、WordPressのダッシュボードからすぐに地図を作成することができます。

  

  Intergeo interface

  そして、ショートコードを使ってサイトのどこにでも埋め込むことができます。

  Gutenberg Block For Google Maps Embed

  Gutenberg Block For Google Maps Embedは、新しいWordPressのGutenbergブロックエディタに、専用のGoogle Mapsブロックを追加するシンプルなプラグインです。

  このブロックでは、任意のアドレスを埋め込むことができ、以下の選択も可能です。

  • 寸法
  • ズームレベル
  • インタラクティブマップ vs スタティックマップ (やはり後者の方がパフォーマンスが向上します)

  独自のカスタムマップを作成することはできませんが、新しいブロックエディタを使用していて、簡単なマップを簡単に埋め込みたい場合には便利なオプションです。

  Google マップ は WordPress サイトの速度を低下させる

  Google マップでは、インタラクティブなマップを使用して大量のクールな機能をサイトに埋め込むことができますが、そのインタラクティブな機能を実現するために大量のスクリプトを読み込む必要があるため、パフォーマンス上のトレードオフがあります。

  まず、ウェブサイト上でマップをインタラクティブに閲覧する必要がない場合、サードパーティのツールを使わずに高速化する簡単な方法は次のとおりです。

  • サイトで使用するマップのスクリーンショットを撮る
  • そのスクリーンショットを Google マップ ウェブサイト上のマップにリンクするか、ユーザーがクリックするとインタラクティブ マップのライトボックス ポップアップを開く。

  この方法では、あなたのサイトは通常の画像を読み込んでいるだけで、Google Mapsに関連するすべてのスクリプトを読み込んでいるわけではありません。

  この作業を手動で行う代わりに、無料のAWEOS Google Maps iframe load per clickプラグインを使用することもできます。 このプラグインは、Google Mapsの埋め込みを、一般的なプレースホルダー画像に自動的に置き換えます。

  

  Google Maps placeholder image

  または、JavaScriptを使用せずに通常の画像を返すGoogle Maps Static APIを使用することもできます。

  しかし、このような静的なアプローチでは対応できない場合もあり、多くの人がインタラクティブな Google マップのエクスペリエンスをすぐに埋め込みたいと考えています。 遅延ローディングを使用すると、訪問者がページをスクロールし始めるまで、折り返し以下に埋め込まれた Google マップの読み込みを待ちます。

  画像や動画を遅延ロードする方法についてはすでに説明しましたが、Google Mapsでも同じことが言えます。

  これを可能にするプラグインがいくつかあります。例えば、a3 Lazy Loadプラグインでは、iframeの埋め込みを遅延ロードすることができ、その中にはGoogle Mapsも含まれています:

  

  Lazy load Google Maps

  その他のオプションは以下のとおりです。

  • BJ Lazy Load
  • Lazy Load by WP Rocket
  • Easy Lazy Loader

  Summary

  単純な地図をサイトに埋め込みたいだけなら、内蔵の埋め込みコード機能を使ってプラグインなしでWordPressにGoogle Mapsを追加することができます。

  これらの手動の方法以外にも、WordPressのダッシュボードから離れることなくコントロールできるGoogle MapsのWordPressプラグインもたくさんあります。

  どの方法を選んでも、Google Mapsを使用することによるパフォーマンスへの影響に注意してください。

  どのような方法であっても、Google マップの使用によるパフォーマンスへの影響には注意を払ってください。絶対に必要な場合にのみ Google マップを使用するようにし、パフォーマンスへの悪影響を減らすために、プレースホルダー画像や遅延ロードなどの戦術を検討してください。 コメントで教えてください！

  この記事を気に入っていただけたなら、KinstaのWordPressホスティングプラットフォームを気に入っていただけると思います。 あなたのウェブサイトをターボチャージし、当社のベテランWordPressチームから24時間365日のサポートを受けられます。 当社のGoogle Cloud搭載のインフラストラクチャは、オートスケーリング、パフォーマンス、セキュリティに重点を置いています。 Kinstaの違いをお見せしましょう! プランをチェック