Otter Blocksプラグインを使ってWordPressにGoogle Mapsを埋め込む方法

スポンサーリンク
スポンサーリンク

ビジネス、組織、イベント、またはその他の理由で地図を表示する必要がある場合でも、WordPressにGoogle Mapsを追加する方法を知っていると便利です。

さらに、適切なプラグインを使用すると、より良い物理的な場所や他の重要な情報を紹介するカスタマイズされたインタラクティブなマップを作成することもできます。

このガイドでは、初心者にも使いやすいOtter Blocksプラグインを紹介します。そして、WordPressにGoogle Mapsを追加する方法を紹介します。それでは、ご覧ください。

スポンサーリンク

オッターブロックのGoogleマップブロックの紹介

Otter – Page Builder Blocks & Extensions for Gutenberg Otter – ページビルダーブロック & Gutenberg用エクステンション

作者: ThemeIsle

現在のバージョン: 2.0.9

最終更新日 2022年7月29日

otter-blocks.zip

94%評価

100,000+ インストーラ

WP 5.8+必要数

WordPress に Google マップを追加する最も簡単な方法は、Otter Blocks のような適切なプラグインを使用することです。Themeisleは、ユーザーがニーズに合わせて素早く地図を作成し、カスタマイズできるようにこのプラグインを構築しました。強力なUIマップビルダーを使えば、好きなだけマップを作成でき、保存、編集、クローンも可能です。

主な機能

  • 位置、ズームレベルなど、マップの多くの要素をカスタマイズできます。
  • カラースキームやその他のオプションを通じて、マップにスタイルを設定します。
  • 地図に複数の場所とマーカーを追加します。
  • 簡単にあなたのマップのライブラリを整理します。

価格 Otter Blocks は無料です。

WordPressにGoogle Mapsを追加する方法(3ステップ)

それでは、あなたのウェブサイトに地図を作成する方法を紹介します。まず、他のプラグインと同じようにOtter BlocksをWordPressサイトにインストールします。そして、以下の手順でWordPressにGoogle Mapsを追加してください。

ステップ1:Google Maps APIキーをWordPressに追加する

Otter Blocksをインストールすると、ダッシュボードの設定タブの下にOtterという新しいセクションができます。その中にあるMapsセクションで、APIキーを入力する欄があるので、マップを作成する前に追加しておく必要があります。

Otter Blocks Google Maps API and Settings

このキーを取得するには、Google APIs Dashboardにアクセスします。すでにGoogleアカウントをお持ちの場合は、このダッシュボードにアクセスすることができます。

Google APIsダッシュボードで、ページの上部にある青いCreate Projectボタンを選択します。

Button to create a project for Google Maps.

次の画面でCreateを選択します。次に、プロジェクトの名前を決めます。

Creating a Google Maps project.

もう一度「Create」をクリックすると、ダッシュボードに戻ります。画面上部のEnable APIs and Servicesを選択し、API Libraryで “Google Maps JavaScript API “を検索してください。見つかったら、「Enable」を選択します。

Button to enable the Google Maps API.

次の画面で、右上の「Create Credentials」ボタンをクリックします。

そして次のページで、「What credentials do I need? APIキーが表示されるので、それをコピーします。

Google Maps API key

WordPressのサイトに戻り、Google Maps API Keyのボックスにキーを貼り付けます。

Adding Google Maps API to WordPress

変更を保存するのを忘れないでください。これで、地図の作成を開始する準備ができました。

ステップ2:新しいマップを作成する

最初のマップを作成するには、OtterセクションからGoogle Mapsブロックを選択します。すぐに多くのオプションが表示されます。

Google Map Block options in Otter Blocks

最初にしたいことは、「Add Marker」ボタンを選択することでしょう。これにより、マップの場所を決定し、マーカーを配置することができます。マーカーにタイトルを付け、スタイルを選択し、住所を入力することができます。

The map marker options.

テキストボックスでは、ユーザーがマーカーをクリックしたときに表示されるテキストを追加したり、フォーマットしたりすることができます。

An example of a map marker.

この後、マップビルダー内の他のオプションを使って、マップのカスタマイズを始めることができます。それでは、各タブを1つずつ見ていきましょう。

位置決めと拡大縮小

地図のズームレベルや位置を設定するには、サンプル地図を拡大・縮小して、好きな場所にドラッグするだけです。エディターで設定した方法が、あなたのサイトでの表示方法となります。

また、地形、衛星、道路、ハイブリッドなど、地図の種類を変更することができます。

コントロールズ

The controls tab.

Controlsセクションでは、ユーザーがどのような選択肢を利用できるかを決めることができます。これには、ユーザーがマップをドラッグできるかどうか、ストリートビューのオプションがあるかどうかが含まれます。

スタイル

スタイルセクションでは、マップの外観を調整することができます。マップのスタイルは、あらかじめ用意されているものから選択することもできますし、自分で作成することもできます。

しかし、上記の設定を微調整することで、スタイリッシュで、訪問者にとって便利なマップを作成することができるはずです。

ステップ3: 地図をサイトに配置する

マップを完璧に調整したら、保存するのを忘れないでください。保存すると、地図がページ上に表示され、幅の調整、スタイルの変更、地図の削除のボタンが表示されます。

The map settings in Otter Blocks

公開をクリックすれば完了です。これで、あなたのサイトのフロントエンドに地図が完璧に表示されるようになりました。

A map on a website.

この方法で、同じマップを複数の場所に配置したり、様々なマップをサイトに追加することができます。以上で、WordPressにGoogle Mapsを追加することができました。

結論

Webサイトでは、「見せる、教えない」が鉄則です。例えば、地図を掲載することで、あなたのビジネスや組織が地域社会にどのように溶け込んでいるかを訪問者に正確に示すことができます。地図は、単に住所を提供するよりも、実際の場所に足を運んでもらうための説得力のある方法であり、特に、インタラクティブな地図であればなおさらです。

この手法を自分のサイトで活用するには、Otter Blocksプラグインを使って、WordPressにGoogle Mapsを追加する方法があります。以下の3つのステップを踏むだけです。

    1. Google MapsのAPIキーをWordPressに追加する。
    1. 新しいマップを作成し、プラグインの設定を使ってマップを設定する。
    1. 提供されているショートコードを使用して、サイトに地図を配置します。

Otter BlocksのGoogle Mapsブロックの効果的な使い方について何かご質問はありますか?下のコメント欄で何でも聞いてください

タイトルとURLをコピーしました