WordPressの1ページに複数のGoogleマップを追加することは、訪問者を個別のページに送信することなく、すべての場所を示す最も簡単な方法の1つです。
地元のビジネスのさまざまな場所を管理しているときに、私もこの問題に直面しました。各場所には独自のマップが必要でしたが、道順を知るためだけに人々がクリックして回ることは望んでいませんでした。
このガイドでは、初心者向けの2つの方法を順を追って説明します。1つは、ドラッグアンドドロップのGoogleマップブロックを備えたページビルダーを使用する方法です。もう1つは、Googleマップから直接無料の埋め込みコードを使用する方法です。
必要なもの：管理アクセス権を持つWordPressサイトと無料のGoogleアカウント。ドラッグアンドドロップの方法を使用したい場合は、SeedProd Proも必要になります。
方法1. SeedProdを使用して1ページに複数のGoogleマップを追加する
このチュートリアルの最初の方法では、WordPressのランディングページに複数のGoogleマップを追加する方法を示します。
ランディングページは、ターゲットトラフィックをリードや販売に転換する最良の方法です。したがって、イベントやローカルストアでの割引を宣伝している場合、複数のマップを備えたランディングページは、人々を店に呼び込むのに理想的な方法です。
そして、そのための最高のWordPressランディングページプラグインはSeedProdです。
SeedProdは、コードを書かずにコンバージョン率の高いページを作成できる、ビジュアルWordPressランディングページビルダーおよびウェブサイトビルダーです。ドラッグアンドドロップエディターでカスタマイズできる、何百ものレスポンシブなランディングページテンプレートが付属しています。
さらに、SeedProdには、以下を含む、ユーザーフレンドリーなコンテンツをページに追加するためのスマートコンテンツブロックが豊富に用意されています。
つまり、開発者を雇うことなく、あらゆるページを迅速に作成できます。
SeedProdを使用してWordPressの1ページにGoogleマップを追加する方法を学ぶには、以下の手順に従ってください。
ビデオチュートリアル
ステップ1. SeedProdランディングページプラグインをダウンロードする
まず、SeedProdのウェブサイトにアクセスし、SeedProdプラグインをコンピューターにダウンロードします。
SeedProdには無料版がありますが、このチュートリアルではSeedProd Proを使用します。これにより、Googleマップブロックを使用できます。
プラグインをダウンロードしたら、ウェブサイトにインストールしてアクティブ化します。このステップでヘルプが必要な場合は、WordPressプラグインのインストールに関するこのステップバイステップガイドに従ってください。
SeedProdをインストールすると、ライセンスキーを求めるウェルカム画面が表示されます。キーを入力し、ライセンスキーの確認ボタンをクリックしてライセンスをアクティブ化します。
注：キーは、SeedProdアカウントにログインし、「ライセンスキー、詳細、ダウンロードを表示」リンクをクリックすることで見つけることができます。
ステップ2. 新しいランディングページを作成する
ライセンスキーをアクティブ化した後、ウェルカム画面を下にスクロールし、最初のページを作成ボタンをクリックします。
そこから、SeedProdのランディングページダッシュボードに移動します。
このページには、次のようなさまざまなランディングページモードがあります。
そして、これらのページモードを使用すると、ワンクリックでさまざまなランディングページをオンにできます。たとえば、マイナーアップデートを実行しているときにメンテナンスモードを有効にすることができます。
ページモードセクションの下にある 新しいランディングページを作成 ボタンをクリックして、最初のページを作成します。
次の画面では、何百もの既製のランディングページテンプレートから選択できます。テンプレートをクリックして選択するだけで、開始点として使用できます。
テンプレートを選択すると、ページの名前を入力し、URLを入力するように求めるポップアップが開きます。
そこから、保存してページ編集を開始 ボタンをクリックして、テンプレートを起動します。
ステップ3. ランディングページをカスタマイズする
デザインを起動すると、SeedProdのページビルダーで開きます。エディタは、ページを簡単にカスタマイズできるように、ユーザーフレンドリーな2パネルデザインになっています。
- 左パネル: ページを構築およびカスタマイズするためのブロックとセクション
- 右パネル: リアルタイムでランディングページのライブプレビュー
エディタの上部には、デザイン、統合、設定をすばやく切り替えるためのナビゲーションメニューがあります。
そして、左側のパネルの下部には、変更の元に戻す/やり直し、モバイルプレビューへの切り替えなどを行うためのいくつかのアイコンがあります。
これらの設定により、ランディングページの目標を達成するためにデザインをより簡単にカスタマイズできます。たとえば、ページの見出しをクリックすると、コンテンツや色を変更し、リアルタイムで変更を確認できます。
または、デフォルトのテンプレート画像を置き換えるには、いずれかの画像をクリックして、コンピューター、メディアライブラリから選択した画像、または無料のストック写真に置き換えることができます。
すべてが希望どおりに見えるまでデザインのカスタマイズを続けます。そして、右上隅にある 保存 ボタンをクリックすることを忘れないでください。
ステップ4. ランディングページに複数のGoogleマップを追加する
SeedProdの組み込みGoogleマップブロックを使用すると、ランディングページに複数のGoogleマップを簡単に追加できます。
まず、各マップを配置するための列を追加しましょう。左側のパネルから 列 ブロックをクリックし、ページ上のセクションにドラッグします。
次に、表示したい列数を選択します。このガイドでは、3列レイアウトを選択しました。
これで、各列にGoogleマップを追加する準備ができました。
これを行うには、Googleマップ ブロックをクリックし、最初の列にドラッグします。
ブロック設定をクリックすると、選択した場所を入力できるパネルが開きます。次に、マップのズームを選択し、配置を変更し、幅を調整できます。
さらに、高度な タブで、さまざまな境界線のスタイルを選択し、カスタムマップの周りの間隔を調整できます。
次に、ランディングページに追加したいマップごとにこの手順を繰り返します。
ステップ5. Googleマップランディングページを公開する
ランディングページの外観に満足したら、緑色の保存ボタンの横にある下矢印をクリックし、公開 をクリックします。
次に、ページが公開されたことを示すウィンドウが表示されます。ライブプレビューを表示するには、ライブページを表示 ボタンをクリックします。
方法2. WordPressの1ページに複数のGoogleマップを手動で追加する
このガイドの2番目の方法では、Googleマップの埋め込みコードをコピーしてWordPressの投稿またはページに貼り付けます。これは、マッププラグインを使用する代わりに、行う方法です。
この方法の欠点は、表示したいマップごとに埋め込みコードを見つける必要があることです。また、WordPressサイトとGoogleマップの間を行き来する必要があります。
さらに、WordPressに直接マップを埋め込むと、カスタマイズオプションが制限されます。そのため、SeedProdのようなWordPressページビルダーで得られる高度なレイアウト制御はできません。
埋め込みコードを使用して、複数のGoogleマップを手動で埋め込む手順を以下に示します。
ステップ1. Googleマップで場所を見つけて共有する
まず、Googleマップにアクセスし、埋め込みたい最初の住所を入力します。
場所を見つけたら、共有アイコンをクリックして、Googleマップの共有設定を表示します。
次に、埋め込みタブをクリックし、ドロップダウンメニューからマップサイズを選択して、「HTMLのコピー」リンクをクリックします。
ステップ2. WordPressに埋め込みコードを追加する
次に、WordPressダッシュボードに移動し、新しいページを作成します。
WordPressエディター内で、プラス（+）アイコンをクリックして新しいWordPressブロックを追加し、カスタムHTMLブロックをクリックします。
Googleマップからコピーした埋め込みコードをHTMLブロックに貼り付けます。プレビューボタンをクリックすると、マップの外観を確認できます。
ステップ3.さらにGoogleマップを埋め込む
これで1つのマップを追加する方法がわかったので、同じ手順でさらに追加します。別のマップの場所を選択し、埋め込みコードをコピーして、WordPressページ上の新しいHTMLブロックに追加するだけです。
すべてのマップをページに追加したら、公開をクリックします。次にページをプレビューすると、各マップが1つの画面に埋め込まれているのが表示されます。
WordPressにマップを複数追加するにはどうすればよいですか？
これで、WordPressの1ページに複数のGoogleマップを追加する方法はわかりました。しかし、1つのマップに複数のピンを追加して、それをWordPressサイトに埋め込みたい場合はどうでしょうか？
幸いなことに、これは前述のマップ埋め込み方法で実行できます。ただし、以下に強調する追加の手順がいくつかあります。
ステップ1.カスタムGoogleマップを作成する
まず、Googleマップにアクセスし、メニューを開いて、「マイプレイス」リンクをクリックします。
そこから、マップタブをクリックし、ページ下部にある「マップを作成」をクリックします。
「無題のマップ」というラベルをクリックし、マップにわかりやすい名前を付けます。「無題レイヤー」の見出しについても、この手順を繰り返します。
ステップ2.マップの場所をピン留めする
これで、検索バーに場所を入力してマップで検索できます。場所を見つけたら、+マップに追加リンクをクリックして、その場所にマーカーを配置します。
マップに追加したいすべての場所について、この手順を繰り返します。
ステップ3.マップを共有する
マップをWordPressに埋め込むには、まず公開する必要があります。そうしないと、埋め込みコードにアクセスできません。したがって、「共有」アイコンをクリックしてください。
次に、次の設定をオンの位置に切り替えます。
- このリンクを持つすべてのユーザーが閲覧可能
- 他のユーザーがこのマップをインターネットで検索して見つけられるようにする
マップを共有した後、右上隅にある3つのドットをクリックし、「サイトに埋め込む」オプションを選択します。
そこから、カスタムGoogleマップの埋め込みコードをコピーできます。
ステップ4. WordPressにマップを埋め込む
最後のステップは、複数の場所を持つマップを新しいWordPressページに追加することです。新しいページを作成し、カスタムHTMLブロックを選択して、埋め込みコードを貼り付けます。
これで、公開をクリックしてページをプレビューすると、複数のカスタムマーカーを持つマップが1つだけ表示されます。
WordPressにGoogleマップを追加することに関するFAQ
WordPressにマップを埋め込むにはGoogle Maps APIキーが必要ですか？
いいえ、基本的な埋め込み方法では不要です。Googleマップで「共有」>「埋め込む」オプションを使用すると、iframeコードはAPIキーなしで機能します。APIキーが必要なのは、Google Maps APIを介して接続するマッププラグインを使用する場合、またはJavaScript APIを使用してカスタムマップを構築する場合のみです。
1ページに複数のGoogleマップがあると、ウェブサイトの速度が低下しますか？
埋め込まれた各マップは独自のiframeを読み込むため、複数のマップを追加するとページの読み込み時間が長くなる可能性があります。1ページあたり3〜4マップに抑えることをお勧めします。それ以上必要な場合は、代わりに複数のピンを持つ単一のマップの使用を検討してください。また、訪問者がスクロールしてマップが表示されるまで読み込まないように、各iframeにloading="lazy"を追加することもできます。
埋め込まれたGoogleマップの外観をカスタマイズできますか？
基本的な埋め込み方法では、オプションは限られています。埋め込みコードをコピーする際に、小、中、大、またはカスタムサイズを選択できます。ピンの色、情報ウィンドウ、マップのスタイリングをより細かく制御するには、まずGoogleマイマップを使用してカスタムマップを作成してから、それを埋め込みます。SeedProdのGoogleマップブロックを使用すると、ズーム、配置、境界線を調整することもできます。
GoogleマップはWordPressウェブサイトで無料で利用できますか？
はい、iframeを使用してGoogleマップを埋め込むことは、使用制限なしで完全に無料です。プラグインを介してGoogle Maps APIを使用する場合、Googleは毎月200ドルの無料クレジットを提供します。これは約28,000回のマップ読み込みに相当し、ほとんどの中小企業サイトでは十分すぎる量です。
これで、WordPressの1ページに複数のGoogleマップを追加する2つの簡単な方法がわかりました。レイアウトを完全に制御し、より迅速なワークフローを実現したい場合は、SeedProdのドラッグアンドドロップビルダーが最も簡単なオプションです。
SeedProdを使用すると、コーディングなしで数回クリックするだけで、マップ、連絡先の詳細、その他の必要な要素を追加できます。今すぐ始めましょう。プロフェッショナルなページを数分で作成できます。
以下の WordPress ガイドも役立つかもしれません。
- WordPressにカスタムCSSを追加する方法
- WordPressでボックスシャドウを追加する方法
- WordPressのページと投稿にギャラリーを追加する方法
- WordPressでページタイトルを非表示にする方法
- WordPress でマージンを変更する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
