Map Location WordPress プラグインを使用して詳細な Google マップをホストする

公開: 2023-03-30

WordPress Web サイトでインタラクティブな Google マップをホストできることをご存知ですか?

iframe コードを HTML ブロックにコピーするだけで、任意のページや投稿に Google マップを埋め込むことができることは既にご存知かもしれません。 指定したエリアの地図が表示されます。 ただし、それが HTML 埋め込み方式の限界です。

WordPress サイトで Google マップの場所を別のレベルに引き上げたい場合は、この記事でその方法を正確に説明しますので、そのままにしておいてください。

しかし、最初に、サイトで Google マップをホストすることで、どのような用途が考えられるでしょうか?

1 つには、ビジネスの場所をピンで示すことができます。 または、イベントを計画している場合は、イベント ページに正確な場所を表示して、訪問者が前もって簡単に計画できるようにすることができます。 特定の都市で訪れるのに最適な博物館を旅行者に伝える旅行 Web サイトがあるとします。 または、ハイキング トレイルを表示し、ユーザーがハイキングに関する独自のメモを入力できるようにすることはできますか?

これはすべて、Creative Minds の Map Locations WordPress プラグインで行うことができます。 始めましょう！

Map Locations プラグインを使用して独自のマップを作成する

Map Locations プラグインを使用すると、Google マップに複数の場所を、その場所に関する特定の情報に加えて、画像、ビデオ、郵便番号ルート、検索可能なマーカーを配置できます。

Google マップの統合を使用すると、複数のマップを使用して店舗の場所のシステムを作成し、場所のインタラクティブなディレクトリを作成できます。 プラグインを使用すると、場所ごとに固有のアイコンを表示することもできます.

Cm Map Locations プラグインの WordPress ページのスクリーンショット

さらに、プラグインは以下をサポートします。

  • ロケーションのインポートとエクスポート
  • 郵便番号による場所検索
  • ショートコードを使用して場所を埋め込む
地図の場所を確認する

Map Locations WordPress プラグイン入門

Map Locations プラグインには、設定の完全なメニューがあり、WordPress 管理ダッシュボードで簡単にアクセスできるユーザー ガイドをホストします。 マップを構成およびセットアップするには、いくつかの重要な手順があります。 1 つ目は、サイトにプラグインをインストールすることです。

マップ ロケーション プラグインをインストールする

Map Locations プラグインは、WordPress.org ページで見つけてダウンロードできます。 または、ダッシュボードの[プラグイン] → [新規追加]で「cm マップの場所」を検索することもできます。

また、Creative Minds Web サイトでプラグインのプレミアム バージョンの 1 つを購入することもできます。

インストールしてアクティブ化すると、左側のダッシュボード メニューに「CM マップの場所」という新しいメニュー項目が表示されます。

プラグインを構成する最初のステップは、Google Maps API キーを入力することです。 まだお持ちでない場合は、今すぐ確認しましょう。

Google Maps API キーを取得する

まず、Google アカウントが必要です。 2018 年 7 月以降、Google マップ、ルート、プレイスのデータを使用するには、Google Cloud にお支払い情報が必要になります。 ただし、API キーを作成するときに、その情報を追加する機会があります。

CM Map Locations→Settingsの下に、API キーのフィールドとそれを取得するためのリンクがあります (まだ持っていない場合)。

マップの場所メニューのスクリーンショット

Map Locations プラグインを使用するには、いくつかの API キーが必要になります。

  • JavaScript API
  • Geolocation API (一部の機能では HTTPS が必要)
  • ジオコーディング API
  • プレイス API

これらのキーを取得するには、Google Developers ページにアクセスしてください。

プロジェクトに移動するか、新しいプロジェクトを作成します。

Google Developer プロジェクト メニューのスクリーンショット

次に、 API & Services → Libraryに移動します。

リストから 1 つの API を選択するか、検索バーを使用して、前述の API のいずれかを見つけます。 API のメニュー ポップアップで、青色の[有効にする]ボタンをクリックします。 API ごとに手順を繰り返します。

すべての API を有効にしたら、キーを取得する必要があります (必要なのは 1 つだけです)。 サイドバーで、API キーが一覧表示されている資格情報を選択します。 API キーをクリップボードにコピーします。すぐにこれを Web サイトに貼り付けます。

最初に、前述のように Google Cloud の課金を有効にする必要があります。 これは、Maps Location プラグインが正しく機能するための重要なステップです。 プロジェクトにログインしたら、左上のハンバーガー メニューをクリックし、[請求] を選択します。 請求先アカウントをリンクするよう求めるメッセージが表示されます。 そのボタンをクリックして、プロンプトに従います。

Google API キーを設定して取得するためのすべての手順が完了したので、WordPress サイトに戻ります。 CM マップの場所の設定ページで、Google Maps API キーを貼り付け、下部にある [保存] をクリックします。 必要に応じて、右側のボタンを使用して構成をテストできます。

場所の追加

Map Locations プラグインは、訪問者用とユーザー用の両方のインデックス ページを作成します。 場所を追加すると、それらのページに一覧表示されます。 場所を追加する前に、マップのカテゴリを少なくとも 1 つ作成することをお勧めします。

これは、新しい投稿カテゴリを追加するのと同じくらい簡単ですが、これらは地図の場所に固有のものです. CM Map Locations→Categoriesの下に好きなだけカテゴリを作成します。 各カテゴリにデフォルトのマーカー アイコンを追加することもできます。

マップの場所メニューのスクリーンショット

カテゴリを作成したら、場所を追加できます。 CM Map Locations メニューを使用するか、管理ツールバーの+ NewをクリックしてLocationを選択します。 新しい場所のページ エディターで、目的の場所に関連する場所の名前と説明のフィールドに入力します。

リストから適切なカテゴリを選択し、マーカー アイコンを選択します。 必要に応じて、独自のアイコンをアップロードすることもできます。 次に、場所に関する画像や動画を追加できます。これは、旅行ガイド サイトで役立ちます。

次に、ページに表示されている Google マップまで下にスクロールします。 場所を検索するか、必要に応じてマップを移動します。 場所が見えたら、描画ツールの 1 つを選択して、地図上に場所の境界を描きます。

Google マップでマップの場所を作成するスクリーンショット

ページをさらに下にスクロールすると、現在地の正確な緯度、経度、住所情報が自動的に入力されます。 必要に応じて、次を追加できます。

  • 電話番号
  • Webサイト
  • 電子メールアドレス
  • URL

[保存]ボタンをクリックすると、サイトで利用可能な場所のリストに場所が追加されます。 場所を表示すると、訪問者は適切にフォーマットされた情報と地図を見ることができます。

表示されたサンタバーバラの地図のスクリーンショット

インデックスページの作成

インデックス ページの目的は、さまざまな場所を表すマーカーと、それらの場所のカスタマイズ可能なリストを含む地図を表示することです。

インデックス ページは、次のような各場所に関するさまざまな情報を表示するように構成できます。

  • タイトル
  • 説明
  • 住所
  • 評価。

ユーザーは、マップと場所のリストを操作して、特定の場所を検索したり、利用可能なすべてのオプションを閲覧したりできます。

インデックス ページには、郵便番号の半径フィルターや、カスタム URL や各場所への道順を追加する機能などの機能も含めることができます。

ショートコードを使用してマップを表示する

ショートコードは WordPress 固有のショートカットで、ユーザーが場所を含む地図などの動的機能を投稿やページに追加できるようにします。

場所のスニペットの表示、地図上の特定の場所の表示、カテゴリの場所を含む地図の表示、現在の場所の地図の表示など、さまざまな目的のためにさまざまなショートコードが存在します。

ユーザーは、マップのテーマ、幅、高さを選択したり、表示される場所の数を制限したりするなど、これらのショートコードをより具体的にするパラメーターを追加できます。

以下は、すべてのショートコードとそのパラメーターのリストと、理解しやすくするためのサンプルです。

場所のショートコード:

  1. スニペット
    • ショートコード: [cmloc-snippet]
    • 用途: 場所のスニペットを表示します。
    • フィルタリング パラメータ: id
    • パラメータを表示: おすすめ
    • 例: [cmloc-snippet id="487" featuring="map"]
  2. 特定の位置図
    • ショートコード: [cmloc-location-map]
    • 用途: 地図上に特定の場所を表示します。
    • フィルタリング パラメータ: id
    • ビュー パラメータ: テーマ、マップ高さ、マップ幅、幅、ショータイトル、ショーデート
    • サンプル: [cmloc-location-map id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. 複数の場所の地図
    • ショートコード: [cmloc-locations-map]
    • 用途: 選択したカテゴリの場所を含むマップを表示します。
    • フィルタリング パラメーター: showonlybyparams、limit、page、category、taxonomy_key
    • ビューのパラメーター: テーマ、リスト、マップ幅、幅、メニュー、ツールチップ、マップ、ユーザートラッキング、from_date、to_date
    • パラメータを取得: bgcolor、bgcolor_filter、time、time_filter、identifier、identifier_filter、from_date、to_date、hours、path
    • サンプル 1: [cmloc-locations-map category="山"]
    • サンプル 2: [cmloc-locations-map list=left limit=4 page=1 category=”111”]
  4. 現在地マップ
    • ショートコード: [cmloc-current-locations-map]
    • 用途: 現在地の地図を表示します。
    • フィルタリング パラメータ: limit、page
    • ビュー パラメータ: テーマ、マップ幅、幅、ツールチップ
    • サンプル: [cmloc-現在の場所-マップ]

ショートコードは、参照用のショートコード オプションの下にあります。

利用可能なショートコード

CM Map Locations ナレッジ ベースのヘルプ ドキュメントで、ショートコードの設定とショートコードを使用した場所の表示に関する詳細な手順を見つけることができます。

アクセス制御

マップをインタラクティブにしたい場合は、 CM マップの場所メニューでアクセス コントロールを構成する必要があります。 アクセスには複数のオプションがあります。

アクセス設定を使用すると、管理者は場所を表示、表示、作成、および更新できるユーザーと、画像をアップロードするときにメディア ライブラリを使用できるロールを制御できます。

管理者は、すべてのユーザー、ログイン ユーザー、または管理者、編集者、作成者、寄稿者、購読者などの特定のユーザー ロールなどの事前設定されたオプションから選択できます。

または、カスタム ロールを作成し、アクセスを許可されているユーザーの機能名を一覧表示することもできます。

場所の一覧表示

これにより、ロケーション インデックスにアクセスできるユーザーを指定し、ロケーションを検索またはフィルタリングできます。

場所を見る

これにより、その場所のページを表示できるユーザーが決まります。

場所を作成

ロケーションを作成できるユーザーを選択します。

自分の場所を更新する

場所を更新できるユーザーを選択します。

メディア ライブラリを使用できる役割

サブスクライバーが upload_files 機能を持っている場合、場所の画像をアップロードするときに WordPress メディア ライブラリ タブを表示できます。 ユーザーが Web サイトのメディア ライブラリを検索できないようにする場合は、特定の役割のアクセス権を必ず取り消してください。

カテゴリごとに、WordPress コアに含まれるデフォルトのロール、または特定のロールを指定するプラグインによって提供されるロールから選択できます。

その他の機能

Map Locations プラグインの設定と使用の基本について説明しましたが、他にも多くの機能を利用できます。

テーマ

サイトで場所を際立たせるために、最大 6 つのテーマから選択できます。

タイル/レイヤー

タイルまたはレイヤーは、マップの残りの部分とは別に生成および表示されるマップのセクションです。

これらのタイルまたはレイヤーは通常、事前にレンダリングされてサーバーにキャッシュされた正方形の画像であり、ユーザーのブラウザーがマップ全体を一度に読み込む必要なく、マップ上にすばやく表示できます。

タイルまたはレイヤーを使用して、ベース マップの上に追加情報を表示できるようにすることで、マップの視覚的表現を強化します。 これには、ユーザーがマップをナビゲートし、表示されている領域のコンテキストを理解するのに役立つラベル、マーカー、およびその他のデータを含めることができます。

さらに、タイルまたはレイヤーを使用すると、マップ全体を一度に読み込むのではなく、現在表示されているマップの部分のみをブラウザーで読み込むことができるため、マップのパフォーマンスを向上させることもできます。

OpenStreetMap または別のサービスを使用して、マップの上にレイヤーを追加して、トラフィック サイクルの表示などの情報を表示できます。

マップ上のタイル オーバーレイの例
マップ上のタイル オーバーレイの例

設定は、[一般] タブの [マップ] セクションにあります。

  • デフォルトのマップ ビュー– デフォルトのビューを選択します。 ユーザーはいつでもこれを変更できます。
  • タイル URL を挿入– 選択したタイル サービスの URL を追加します。 その他の例については、タイルを確認してください – OpenStreetMap Wiki
マップ上のタイルとレイヤーの設定
マップ上のタイルとレイヤーの設定

訪問者がマップの閲覧中にタイルをオンまたはオフにできるようにします。

[タイル] ボタンを選択して、タイルを表示または非表示にします
[タイル] ボタンを選択して、タイルを表示または非表示にします

ユーザーがタイルをアップロードできるようにすることもできます。

ユーザーの場所を表示

ユーザーは地理位置情報を共有し、地図上に表示できます。

REST/API サポート

REST API を使用して、他のサイトやモバイル アプリから場所を作成します。

表示テンプレート

利用可能な表示テンプレートがいくつかあり、店舗検索、リスト、または関心のあるポイントを簡単に作成できます。

半径で検索

任意の国の郵便番号から定義された半径を検索できます。

Waze と Google ルート案内

新しい場所を作成すると、Wave と Google の方向リンクが自動的にリストに追加されます。

Map Locations プラグインの価格

Map Locations プラグインは、いくつでも WordPress サイトに無料でインストールして使用できます。 好きなだけ場所を作成し、説明と画像を追加し、それぞれの場所を独自のマップに表示するために必要なすべての要素が含まれています。 ただし、プレミアム バージョンを購入すると、より多くの機能にアクセスできます。

エッセンシャル (プロ) マップの場所 = $39/年

上記の必須機能に加えて、表示テンプレート、インポート/エクスポート、カテゴリのサポート、天気情報、アクセス制御などを 1 つの Web サイトで取得できます。

Advanced Map Location + Route Manager バンドル = $69/年

このレベルでは、Creative Minds の Route Manager プラグインが追加され、ライセンスが 3 つの Web サイトに拡張されます。

Ultimate Map Location + Map Routes + 5 アドオン = $119/年

Ultimate レベルでは、複数のアドオンと Map Routes プラグインが追加され、最大 10 個の Web サイトのライセンスが提供されます。

各レベルは 1 年間のサポートを提供し、30 日間の返金保証を提供します。

WordPress サイトにインタラクティブ マップを表示する

Map Locations プラグインを使用すると、店舗の場所のリストを作成したり、観光客を任意の都市に案内したり、ユーザーがニーズに合わせて地図を作成および調整したりできます. これは、Creative Minds の開発チームが提供する多数のプラグインの 1 つです。

Map Locations プラグインを試す