Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

お問い合わせフォームに Google マップを埋め込む方法 (マップピン付き)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

サイトのお問い合わせフォームに地図を表示したいですか?

ジオロケーションを使用して、ユーザーの住所を事前に入力し、地図上にピンを置いて位置を示すことができます。これにより、フォームへの入力がより簡単かつ迅速になり、入力完了率の向上につながります。

この投稿では、お問い合わせフォームにGoogleマップをマップピンで埋め込む方法をご紹介します。

How to Embed a Google Map in Contact Forms (With Map Pin)

お問い合わせフォームに Google マップを埋め込む理由

WordPressでサイトを作成した際、訪問者が簡単に商品やサービスについて問い合わせができるように、お問い合わせフォームを追加した可能性があります。

また、実店舗を構えているビジネスであれば、店舗への来店を促すためにGoogleマップを追加していることだろう。

多くのビジネスオーナーが知らないのは、ジオロケーションを使ってお問い合わせフォームの住所フィールドに自動的に入力し、ユーザーの所在地を地図上に表示できることです。これにより、全体的なユーザーエクスペリエンスが向上し、フォームからの離脱を減らすことができます。

ユーザーの位置情報を把握することで、ジオロケーションターゲティングを使用してパーソナライズされたコンテンツを表示し、コンバージョン率を高めることもできます。

それでは、お問い合わせフォームにGoogleマップを埋め込む方法を見てみましょう。

動画チュートリアル

Subscribe to WPBeginner

もし、文章での説明がお望みなら、このまま読み進めてほしい。

お問い合わせフォームにGoogleマップを埋め込む方法

このチュートリアルでは、WordPressに最適なお問い合わせフォームプラグインであるWPFormsを使用します。ドラッグ&ドロップで簡単にフォームを作成できます。

WPFormsには基本的なお問い合わせフォームを作成するのに必要な機能をすべて備えた無料版があります。このチュートリアルではWPForms Proを使用します。

最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、WPForms ” 設定ページにアクセスしてライセンスキーを入力する必要があります。この情報はWPFormsアカウントエリアにあります。ライセンスを有効化するために’Verify Key’ボタンをクリックすることを本当に〜してもよいですか?

Visit the WPForms » Settings Page to Enter Your License Key

次に、WPForms ” Addonsに移動し、Geolocation Addonを見つける必要があります。画面上部の検索オプションを使用するか、利用可能なアドオンをスクロールするだけです。

見つけたら、「アドオンのインストール」ボタンをクリックしてアドオンをインストールしてください。

Navigate to WPForms » Addons and Install the Geolocation Addon

Geolocationアドオンが有効化されたので、その設定を行う必要があります。これを行うには、WPForms ” Settingsに移動し、’Geolocation’タブをクリックします。

このページでは、ジオロケーション・プロバイダーを選択する必要がある。この投稿では、Google Places APIを選択します。

Select a Geolocation Provider

また、「現在地」チェックボックスをクリックしてください。これにより、ユーザーがお問い合わせフォームに入力する際に住所が自動入力され、入力の手間が省け、正確性が向上します。

次に、Google Places API設定までスクロールダウンする必要があります。Google APIキーの入力を求められます。Googleからキーを取得し、入力フィールドに貼り付けることができます。次のセクションでその方法を説明します。

Scroll Down to the Google Places API Settings

Google Places API キーの生成

GoogleプレイスのAPIキーは、Google Cloud Consoleのサイトで取得できます。

ドロップダウンメニューから国を選択し、利用規約に同意するよう求められます。国によっては、メーリングリストへの登録を求められる場合があります。

Obtain an API Key for Google Places From the Google Cloud Console Website

次のステップに進む準備ができたら、「同意して続行」をクリックします。

次に、APIキーのプロジェクトを選択する必要があります。Select a project」をクリックし、リストから使用するプロジェクトをクリックします。

Select a Project or Create a New One

まだプロジェクトを作成したことがない場合や、Googleに追加していない新しいサイトの場合は、「新規プロジェクト」をクリックしてプロジェクトを設定します。

注:Google Places APIを使用するためには、Googleはそのプロジェクトの課金を有効化する必要がある。このチュートリアルで作成するような簡単な地図の埋め込みをカバーするには十分です。小規模なトラフィックのサイトであれば、料金を支払う必要はありません。また、料金を請求する前にアップグレードの権限を求められます。

APIとサービス」ページに移動し、WordPressサイトにGoogleマップを表示するために必要なAPIを有効化します。

ページ上部の「+ APIとサービスを有効化」ボタンをクリックする必要があります。

Click the 'Enable APIs and Services' Button

GoogleのAPIライブラリに移動し、3つの異なるマッピングAPIを有効化する必要があります。

ページ上部の検索機能を使うか、地図セクションの横にある「すべて表示」リンクをクリックすれば見つけることができる。

You Need to Enable Three Mapping APIs

まず、Places APIを見つけて有効化する必要がある。見つけたら、それをクリックする必要がある。次のページで、「有効化」ボタンをクリックします。

その後、Maps JavaScript APIとGeocoding APIについても同じことをする必要がある。

Enable the Places API

これで3つのAPIが有効化されたので、APIキーを作成することができる。

左側のメニューで、API & Services ” Credentials に移動する必要があります。

ここから、画面上部の「+ Create Credentials」ボタンをクリックし、「API key」オプションを選択します。

Click the ‘+ Create Credentials’ Button

APIキーが作成され、ポップアップウィンドウに表示されます。

このチュートリアルの後半で、そのキーをWPFormの設定にコピーする必要があります。とりあえず、APIキーの使用を制限する方法を見てみましょう。

Your API Key Will Be Created and Displayed on a Popup Window

Google Places API キーを制限する

APIキーを使いすぎると、無料プランから外れてしまい、予想以上の費用がかかる場合があります。不正使用や予期せぬ利用を防ぐため、キーを制限することをお勧めします。

そのためには、上のスクリーンショットの「APIキー作成」ポップアップの下にある「キーを制限する」リンクをクリックする必要がある。

次のページでは、さまざまな制限を設定することができます。その最初のものが「アプリケーションの制限」です。

このセクションでは、「HTTPリファラー(ウェブサイト)」オプションをクリックしてください。すると、このキーはサイトでのみ使用されます。

Restrict to HTTP Referrers (Web Sites)

次に、それがあなた自身のサイトでのみ使用されることを確認する必要があります。そのためには、「サイトの制限」セクションまでスクロールダウンし、「項目を追加」ボタンをクリックしてください。

ここで、「新規項目」フィールドに、*example.com/*というパターンを使って、あなたのサイトのドメイン名を入力します。

Type Your Website Domain Into the ‘New Item’ Field Using the Pattern *example.com/*

複数のサイトでGoogleマップを使用する場合は、「項目を追加」ボタンをクリックし、必要な数のドメインを追加することができます。

これで、APIキーを自分のサイトだけに制限することができたので、上記で追加したGoogle APIだけで動作するように制限することもできる。

ページの’API restrictions’セクションまでスクロールダウンし、’Restrict key’オプションを選択する必要があります。するとドロップダウンが表示されるので、’Geocaching API’, ‘Maps JavaScript API’, ‘Places API’のボックスをチェックしてください。

Restrict the API Key to Specific APIs

設定が完了したら、「OK」リンクをクリックして設定を保存してください。

最後に、ページ下部の「保存」ボタンをクリックして、選択した制限をすべて有効化したことを確認してください。

Click the ‘Save’ Button to Activate the Restrictions You Have Chosen

設定が有効になるまで5分ほどかかる場合がありますのでご注意ください。

WPFormsの設定にGoogle APIキーを追加する

APIキーが他のキーと一緒に表示されます。WPFormsのGeolocation設定ページにキーを追加できるように、コピーアイコンをクリックしてください。

Click the Copy Icon and Add the Key to WPForms

APIの設定や制限を変更する必要がある場合は、右側の編集アイコンをクリックしてください。

あなたのサイトに戻り、WPForms ” 設定 ” ジオロケーションページに戻る必要があります。

WPFormsの設定のGoogle Places APIフィールドにキーを貼り付けます。それができたら、’Save Settings’ボタンをクリックしてください。

Scroll Down to the Google Places API Settings

注:Googleプレイスでは、サイトのSSL証明書の取得が必須です。SSL証明書の取得方法については、初心者向け無料SSL証明書の取得方法をご覧ください。

WordPressでGoogleマップを埋め込んだお問い合わせフォームを作成する

WPFormsとGoogle Placesの設定が完了したら、WordPressでお問い合わせフォームを作成する準備ができました。WordPressでお問い合わせフォームを作成する方法についてのガイドに従って始めることができます。

基本的なフォームを作成したら、住所フィールドを追加する必要があります。住所ブロックか個別テキストフィールドのどちらかを使うことができます。このチュートリアルでは、単一行テキストフィールドを使用します。

単線テキストブロックをフォームにドラッグするだけです。

Drag the Single Line Text Block Onto the Form

次に、フィールドの設定をカスタマイズします。そのためには、フィールドをクリックして、個別行テキストの設定を表示する必要があります。

まず、フィールドのラベルを「Address」に変更してください。こうすることで、ユーザーがフィールドに何を入力すべきかが明確になります。

Rename the Field's Label to 'Address'

その後、WordPressのフォームに地図を表示するようにフィールドの設定を変更する必要があります。そのためには、詳細設定タブをクリックする必要があります。

そこで、設定の一番下にある「住所オートコンプリートを有効化」オプションを探し、「オン」に切り替えてください。すると、「地図を表示する」というオプションが表示されますので、こちらも有効化してください。地図をフィールドの上に表示するか下に表示するかを選択できます。

Toggle the ‘Enable Address Autocomplete’ Option On

お問い合わせフォームをサイトに追加する

お問い合わせフォームをサイトに追加する最も簡単な方法は、’埋め込み’ ボタンをクリックすることです。フォームエディター画面の上部にある ‘保存’ ボタンの隣にあります。

フォームを既存のフォームに追加するか、新規ページを作成するかを尋ねられます。

Click the 'Create New Page' Button

このチュートリアルでは、「新規ページを作成」ボタンをクリックします。

次に、ページに名前をつけ、「Let’s Go!

Give the Page a Name and Click the ‘Let’s Go!’ Button

その名前で新しいページが作成され、お問い合わせフォームが自動的に追加されます。

あとはすべて’公開する’ボタンをクリックしてフォームを公開するだけです。

Click the 'Publish' Button to Push the Page Live

お問い合わせフォームでGoogleマップを表示する

ユーザーがお問い合わせフォームにアクセスすると、あなたのサイトからの位置情報へのアクセスを許可するかどうか尋ねられます。

The User Will Need to Give Permission for Your Website to Access Their Location

許可』ボタンをクリックすると、現在地が住所欄に入力され、その場所のピンが地図に追加される。

このオートコンプリート機能により、訪問者はより速く簡単にアドレスを入力することができ、時間を節約することができます。

Autocomplete Makes Typing an Address Faster and More Accurate

住所を変更する必要がある場合は、新しい住所を入力するか、ピンを地図上の別の場所にドラッグするだけでよい。

フォーム上でユーザーの位置情報を表示する方法

ジオロケーションを有効化すると、WPFormsはユーザーがフォームに入力した際の位置情報も記録します。ユーザーの位置情報を知ることで、より良いリードを見つけることができるかもしれません。

WPForms ” Entriesに移動し、お問い合わせフォームをクリックしてください。

Navigate to WPForms » Entries Then Click the Contact Form

ユーザーによって入力されたフォームのリストが表示されます。

特定のフォーム送信を表示するには、右側の「表示」リンクをクリックするだけです。

Click the ‘View’ Link to View an Entry

ユーザーによって入力されたフォームデータ(名前、ビジネスメール電話番号、位置情報など)が表示されます。

これには、Googleマップ上のピン、ユーザーの位置、郵便番号、国、およびおおよその緯度と経度が含まれます。

You Will See a Pin on Google Maps With Their Location

もちろん、ユーザーが位置情報をフォームに知らせる権限を与えなかった場合は、位置情報は表示されません。

これですべてです。これでお問い合わせフォームにGoogleマップを追加することができました。WPFormsを使えばWordPressでアンケートを作成したり、オンライン決済用のフォームを作成したりすることもできます。

WordPressで地図を使うためのベストガイド

WordPress のお問い合わせフォームに Google Maps を追加する方法はお分かりいただけたと思います:

このチュートリアルでお問い合わせフォームに Google マップを埋め込む方法をご理解いただけたでしょうか。また、プレゼントやコンテストを開催する方法や、専門家が選んだすべてのビジネスサイトに最適な WordPress プラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    I use WP Forms and I’m considering integrating maps into the contact form to make the location visible at first glance. I must admit that before seeing this article, I didn’t even know that WP Forms could do this.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。