ご注意!

この記事には PHP コードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

ジオロケーションアドオンのデフォルト場所を変更する

ジオロケーションアドオンを使用する際に、マップに読み込まれるデフォルトの場所を変更しますか? またはズームを変更したいですか? カスタムPHPスニペットを使用すると、フォームでのジオロケーションアドオンの表示をカスタマイズできます。

このチュートリアルでは、フォームが読み込まれたときのマップのデフォルトの場所とズームレベルの設定方法を説明します。


フォームの作成

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーで、フィールドを追加します。少なくとも1つの住所フォームフィールドを含めるようにしてください。

フォームを作成し、少なくとも1つの住所フォームフィールドを含むフィールドを追加する

フォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください

マップの有効化

住所フィールドを追加した後、それをクリックしてフィールドオプションパネルを開き、詳細設定タブを選択します。

オプションまでスクロールダウンし、住所自動入力の有効化設定をクリックして有効にします。これにより、マップの表示設定もクリックして有効にできるようになります。次に、マップをフィールドの下に表示するオプションを選択します。

住所フィールドで住所自動入力、マップの表示、およびフィールドの下のオプションを有効にする

ジオロケーションアドオンの設定やフォームへのマップの追加でヘルプが必要な場合は、このドキュメントを確認してください

デフォルトの場所の変更

デフォルトの場所を変更するには、このコードスニペットをサイトに追加する必要があります。サイトへのスニペットの追加にヘルプが必要な場合は、このチュートリアルを確認してください

/**
 * Change default location on Geolocation addon.
 *
 * @link    https://wpforms.com/developers/how-to-change-default-location-for-geolocation-addon/
 */
 
function wpf_wpforms_geolocation_map_default_location() {
   
    return [
            'lat' => 51.5207,
            'lng' => -0.1550,
        ];
}
add_filter( 'wpforms_geolocation_map_default_location', 'wpf_wpforms_geolocation_map_default_location', 10 );

スニペットでは、ページが読み込まれたときにマップ上のピンが表示される緯度と経度を設定しています。これらの数値が何であるかわからない場合は、Googleのページにアクセスしてこれらの座標を見つけることができます。

マップのズームレベルの変更

ズームレベルを変更するには、前のスニペットと同じ方法で下のスニペットを追加するだけです。両方のスニペットを使用して、デフォルトの場所とズームレベルを一緒に変更できます。

/**
 * Change zoom level for the Geolocation addon map.
 *
 * @link    https://wpforms.com/developers/how-to-change-default-location-for-geolocation-addon/
 */
 
function wpf_wpforms_geolocation_map_zoom( $zoom, $context ) {
   
       // This will change the zoom level while viewing the entry. 
       if ( 'entry' === $context ) {
           return 10;
       }
     
       // This will change the zoom level on the map that displays on the form above/under the Address field.
       if ( 'field' === $context ) {
           return 15;
       }
     
       return $zoom;
}
add_filter( 'wpforms_geolocation_map_zoom', 'wpf_wpforms_geolocation_map_zoom', 10, 2 );

このスニペットでは、コメントで2つの異なるズームレベルを確認できます。1つはエントリページ用で、もう1つはフォーム上のマップ用です。不要な行はコメントアウトするか、完全に削除することができます。

これで、Google PlacesとAlgolia Placesの両方でデフォルトの場所とズームレベルを変更できます

これで完了です!ジオロケーションアドオンを使用する際に表示されるマップのデフォルトの場所を変更する方法がわかりました。

次に、フォームのアドレススキーマを作成する方法も知りたいですか? 住所フィールドの追加スキーマの作成に関するチュートリアルをご覧ください。

フィルター参照: