WordPressにインタラクティブマップを追加する方法

実店舗を持つビジネスを運営している場合や、特定の場所に関するコンテンツを作成している場合、WordPressサイトにマップを追加することは重要です。

最初は複雑に思えるかもしれませんが、プロセスをずっと簡単にする便利なツールが見つかりました。この記事では、WordPressサイトにインタラクティブマップを追加するための2つの簡単な方法を紹介します。

適切なツールの選択から、ページへのマップの埋め込みまで、各ステップを順を追って説明します。

WordPressにインタラクティブマップを追加するタイミング

店舗やカフェなどの実店舗をお持ちの場合、インタラクティブマップは潜在的な訪問者があなたの場所を見つけるのに役立ちます。これにより、より多くの顧客、売上、さらには対面での予約や申し込みを獲得できます。

訪問者は別の地図アプリやウェブサイトを使用する必要なく旅程を計画できるため、ユーザーエクスペリエンスを向上させることもできます。

ウェブサイトによっては、インタラクティブマップが役立つコンテンツを提供する場合があります。例えば、フィットネスブログをお持ちの場合、読者に推奨のランニングルートやハイキングコースを表示することが考えられます。

同様に、ファミリーブログをお持ちの場合は、読者が家族を連れて行けるような子供向けの観光スポットをすべて強調表示できます。

それでは、WordPressにインタラクティブマップを追加するための初心者向けの2つの方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

• 方法 1. ページビルダーを使用してインタラクティブな世界地図を追加する (地図付きカスタムページ)
• 方法2. Googleマイマップを使用してインタラクティブなカスタムマップを無料で作成する

方法1. ページビルダーを使用してインタラクティブな世界地図を追加する (地図付きカスタムページ)

WordPressにシンプルなインタラクティブマップを追加する最も簡単な方法は、GoogleマップとSeedProdプラグインを使用することです。

この高度なページビルダープラグインを使用すると、コードを一行も書かずにプロフェッショナルにデザインされたページを作成できます。

また、レイアウトにドラッグアンドドロップするだけで使用できる、既製のGoogleマップブロックも付属しています。訪問者はズームボタンを使用してマップを操作したり、ドラッグして他のエリアを探索したりできます。

SeedProd を使用すると、独自のデザインを持つスタンドアロンページを簡単にデザインできます。そのため、インタラクティブなマップをカスタムホームページやランディングページに追加したい場合にも最適です。

まず、SeedProdをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

アクティベーション後、ライセンスキーを入力する必要があります。

この情報は、SeedProdウェブサイトのアカウントで見つけることができます。ライセンスキーを追加したら、「キーを検証」をクリックしてください。

それが完了したら、SeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

SeedProdには、美しいランディングページ、セールスページなどを作成するために使用できるすべてのテンプレートが表示されます。ウェブサイトに最適なテンプレートを見つけるために、SeedProdのテンプレートは、メンテナンスモード、近日公開、ウェビナーなどのカテゴリに分類されています。

デザインを詳しく見るには、そのテンプレートにマウスカーソルを合わせます。次に、虫眼鏡アイコンをクリックします。

これにより、テンプレートが新しいタブで開きます。

WordPressウェブサイトで使用したいデザインが見つかったら、単に「このテンプレートを選択」をクリックします。

ランディングページの名称を「ページ名」フィールドに入力できるようになりました。これは参照用ですので、好きな名称を使用できます。

SeedProdはページ名を使用して「ページURL」を自動的に作成しますが、この自動生成されたURLは変更できます。

入力した情報に満足したら、「保存してページ編集を開始」をクリックします。これにより、SeedProdのページビルダーインターフェースが読み込まれます。

このシンプルなドラッグアンドドロップビルダーは、右側にページのライブプレビューを表示します。左側には、WordPressブログまたはウェブサイトに追加できるブロックとセクションを示すメニューがあります。

SeedProdには、美しいページデザインを素早く構築するのに役立つ90以上の既製のブロックが用意されています。これには、カウントダウンタイマーのような高度なブロックや、SoundCloudからのオーディオプレーヤーやTikTokからの動画のような埋め込みが含まれます。

スペーサー、カラム、区切り線などのSeedProdブロックを使用してページを構成することもできます。これにより、訪問者はページをナビゲートし、目的の情報を見つけやすくなります。

ページレイアウトに追加したいブロックを見つけたら、テンプレートにドラッグアンドドロップするだけです。ランディングページを作成する際に、これらのブロックをドラッグアンドドロップしてレイアウト内で移動できます。

インタラクティブマップを追加するには、左側のメニューにあるGoogleマップブロックを見つけて、レイアウトにドラッグするだけです。

Googleマップブロックにはデフォルトの場所が表示されますが、通常はこれを変更したいでしょう。

Googleマップブロックをクリックして選択し、ツールバーに表示される小さな歯車アイコンをクリックします。

これにより、ブロックの設定が左側のメニューに表示されます。

ここで、「場所」フィールドに別の住所を入力します。

ブロックが更新され、このアドレスが表示されます。

訪問者は、マップの右下隅にある「+」と「-」のズームレベルボタンを使用して、この場所を手動でズームインおよびズームアウトできます。ただし、ズームスライダーをドラッグするか、テキストボックスに正確な数値を入力することで、デフォルトのズームを変更できます。

その後、「幅」と「高さ」のスライダーを使用してブロックのサイズを変更したい場合があります。「高さ」はピクセルで表示されますが、「幅」は利用可能な全幅のパーセンテージです。たとえば、「100」はGoogleマップブロックが利用可能な幅の100％を占めることを意味します。

これらの値のいずれかを変更するには、スライダーをドラッグするか、テキストボックスに数値を入力するだけです。変更を加えると、Googleマップブロックが自動的に更新されるため、さまざまな設定を試して最適なものを見つけることができます。

幅を100未満に設定した場合、ブロックの配置を変更したい場合があります。たとえば、インタラクティブマップをページの中央に表示するなどです。

この変更を行うには、単に「配置」セクションの異なるボタンをクリックしてください。

これで、新しいブロックをページレイアウトにドラッグして左側のメニューで変更を加えることで、デザインの作業を続けることができます。詳細については、WordPressでランディングページを作成する方法のガイドを参照してください。

ページのセットアップが完了したら、[保存] ボタンの横にある矢印をクリックし、[公開] を選択します。

これで、ウェブサイトにアクセスすると、インタラクティブマップが機能しているのがわかります。

方法2. Googleマイマップを使用してインタラクティブなカスタムマップを無料で作成する

基本的なインタラクションを備えたGoogleマップを追加したい場合は、SeedProdが優れた選択肢です。

ただし、より高度なインタラクションを提供する必要がある場合は、代わりにGoogleマイマップを使用することをお勧めします。

この無料のオンラインサービスを使用すると、ユニークなマーカー、関心のある地点、運転ルートなどでGoogleマップをカスタマイズできます。その後、コードを使用してウェブサイトに追加できるため、別のWordPressプラグインをインストールする必要はありません。

ステップ1：Googleマイマップを使用してインタラクティブマップを作成する

まず、Googleマイマップのウェブサイトにアクセスし、「新しいマップを作成」をクリックする必要があります。

マップエディタが表示されます。

ここで、ベースマップを選択し、関心のある地点、レイヤーなどを追加できます。

作業を整理しやすくするために、レイヤーに名前を付けることをお勧めします。

これを行うには、「無題レイヤー」の横にある3つのドットをクリックし、「このレイヤーの名前を変更」を選択します。

これで、使用したい名前を入力できます。これは参照用ですので、好きな名前を使用できます。

これで完了したら、「保存」をクリックします。

次に、「ベースマップ」の横にある矢印をクリックして、マップの外観を変更できます。利用可能なオプションを表示するには、矢印をクリックします。

その後、サムネイルのいずれかをクリックすると、そのスタイルがマップに適用されます。

ステップ2：インタラクティブマップに興味のある場所を追加する

単純なマップを作成したいだけであれば、ステップ4にスキップできます。ただし、興味のある地点を追加してマップをカスタマイズしたい場合もあります。

訪問者がこれらの地点のいずれかをクリックすると、ツールチップが開き、場所の名前、説明、写真、利用可能な場合は動画が表示されます。

クリック可能な地点を追加するにはいくつかの方法がありますが、最も簡単なのは、住所を検索バーに入力してから「検索」アイコンをクリックすることです。

Googleマイマップは、そのエリアにズームします。

場合によっては、特にその場所が大きな観光名所や有名な建物である場合、その場所はすでに興味のある地点として追加されていることがあります。その場合は、場所をクリックして「マップに追加」を選択するだけです。

興味のある地点が既に存在する場合、Googleマイマップは自動的にその場所に関する情報をポップアップで表示します。ただし、このデフォルト情報をカスタマイズしたり、独自の写真や動画を追加したりしたい場合があります。

これを行うには、小さな鉛筆のような形をした「編集」アイコンをクリックします。

これで、この興味のある場所をクリックした人に表示したいタイトルと説明を入力できます。

入力した情報に満足したら、「保存」をクリックします。

もう1つのオプションは、ポップアップに独自の画像や動画を追加することです。

例えば、レストランのウェブサイト用にインタラクティブマップを作成している場合、顧客がそれを見つけやすくするために、会場の外観の写真をいくつか追加することが考えられます。

このポップアップをさらに多くの顧客を獲得するために使用することもできます。たとえば、写真スタジオを興味のある地点として追加する場合、ポートフォリオをアップロードすることができます。

メディアを追加するには、小さなカメラアイコンをクリックするだけです。

ポップアップに表示される画像または動画を選択できるようになりました。

選択後、「挿入」をクリックします。

完了したら、「保存」をクリックして変更を保存することを忘れないでください。

場合によっては、Google マップに追加されていない場所を表示したいことがあります。それはあなたのオフィス、店舗検索、真新しい観光名所、またはイベントや会議の集合場所かもしれません。

マーカーを追加するには、検索バーの下にある「マーカーを追加」アイコンをクリックしてください。

これで、マーカーを作成したい正確な場所をクリックできます。

これにより、タイトルと説明を入力できる空のポップアップが開きます。小さなカメラアイコンをクリックして、画像や動画を追加することもできます。

ポップアップの設定が完了したら、「保存」ボタンをクリックします。

より多くの興味のある場所を追加するには、上記と同じプロセスに従ってください。

ステップ3：インタラクティブマップに旅行の経路を追加する

地図上に青い線として表示される経路を追加したい場合もあります。

このマップ機能は、イベントやバーやパブなどの会場への参加者の誘導に役立ちます。旅行ブログを運営している場合は、読者に観光ルートをいくつか勧めることもできます。

経路案内を追加する方法はいくつかありますが、最も簡単な方法は、検索バーの下にある「経路案内を追加」アイコンをクリックすることです。

これにより、画面の左側に新しいセクションが追加され、使用したい開始アドレスと終了アドレスを入力できます。

デフォルトでは、Googleマップは運転ルートを表示しますが、代わりに徒歩またはサイクリングルートに切り替えることができます。デフォルトで「運転」と表示されているテキストをクリックし、サイクリングまたはウォーキングアイコンを選択するだけです。

その他のオプションとして、マップ上に線を描くことができます。これは、最も速いルートではなく、2つ以上の場所間の非常に特定のルートを示したい場合に役立ちます。

これを行うには、検索バーの下にある「線を描く」アイコンをクリックします。これで、運転、徒歩、サイクリングのルートを追加するかどうかを選択できます。

その後、開始地点をクリックし、マウスを移動させて目的のルートに沿って線を描きます。

目的地に到着したら、その場所にマーカーを配置するためにクリックするだけです。この時点で、描画を停止するか、マウスを動かし続けてルートにさらにマーカーを追加できます。

ステップ4：WordPressでインタラクティブマップを公開する

マップの設定が完了したら、埋め込み iframe コードを使用してウェブサイトに追加できます。

まず、[共有] ボタンをクリックしてマップを公開する必要があります。これによりポップアップが表示され、マップのタイトルとオプションの説明を入力できます。

入力した情報に満足したら、「OK」をクリックします。

次に、「このリンクを持つすべてのユーザーが閲覧可能」トグルを有効にします。その他の設定はオプションなので、マップを検索できるようにするか、名前とプロフィール写真を表示するかどうかを決定できます。

設定に満足したら、「ドライブに共有」をクリックします。

次のポップアップで、「一般アクセス」の下にあるドロップダウンメニューを開き、「リンクを知っている全員」を選択します。

他の人がマップを編集しないように、「ビューア/エディター」ドロップダウンをクリックして「ビューア」を選択します。最後に、「完了」をクリックします。

その後、左側のメニューにある3つの点のアイコンをクリックします。

次に、[サイトに埋め込む] を選択します。

Google マップには、地図をオンラインストア、ブログ、またはウェブサイトに追加できる埋め込みコードが表示されるようになりました。

このiframeコードをコピーして進んでください。

これで、コードをサイトに貼り付ける準備ができました。WordPressダッシュボードで、インタラクティブマップを追加したい投稿またはページに移動し、Gutenbergエディターを開きます。

次に、「+」ボタンをクリックして「HTML」と入力し始め、カスタム HTML ブロックを見つけます。正しいブロックが表示されたら、クリックして投稿またはページに追加します。

これで、GoogleマップのコードをカスタムHTMLブロックに貼り付けることができます。

公開する準備ができたら、「更新」または「公開」ボタンのいずれかをクリックします。

さて、あなたのウェブサイトにアクセスすると、インタラクティブマップがライブで表示されます。

WordPressにマップを追加することについてもっと知りたいですか？以下の記事をご覧ください：

• WordPressにGoogleマップを追加する方法（正しい方法）
• WordPress向けのベストGoogleマッププラグイン（ほとんど無料）
• お問い合わせフォームにGoogleマップを埋め込む方法（地図ピン付き）
• WordPressにGoogleマップストアロケーターを追加する方法
• WordPressにBingマップを埋め込む方法（ステップバイステップ）

このチュートリアルがWordPressにインタラクティブマップを追加する方法を学ぶのに役立ったことを願っています。また、Google Web StoriesをWordPressサイトに追加する方法を学んだり、PDF、スプレッドシートなどをWordPressに埋め込むための究極のガイドを読んだりすることもできます。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。