Geolocationアドオンを使用する際、地図上にロードされるデフォルトの場所を変更したいですか？あるいはズームを変更したいですか？カスタム PHP スニペットを使えば、フォーム上の Geolocation アドオンの表示をカスタマイズできます。
このチュートリアルでは、フォームが読み込まれたときの地図のデフォルトの位置とズームレベルを設定する方法を説明します。
フォームの作成
まず、新規フォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーでフィールドを追加します。少なくとも1つの「住所」フォームフィールドが含まれていることを確認してください。
フォームの作成にヘルプが必要な場合は、こちらのドキュメントをご覧ください。
地図の有効化
Addressフィールドを追加したら、それをクリックしてフィールドオプションパネルを開き、Advancedタブを選択します。
オプションまでスクロールダウンし、「住所オートコンプリートを有効にする」をクリックして有効にします。次に、「マップを表示する」オプションを選択します。
Geolocation アドオンの設定や、フォームへのマップの追加にヘルプが必要な場合は、こちらのドキュメントをご覧ください。
デフォルトの場所を変更する
デフォルトの場所を変更するには、このコード・スニペットをサイトに追加する必要があります。スニペットをサイトに追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。
/**
* 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つはフォーム上のマップ用です。不要な行をコメントアウトするか、完全に削除することができます。
以上です！これで、Geolocationアドオンを使用するときに表示されるマップのデフォルトの場所を変更する方法がわかりました。
次に、フォームの住所スキームを作成する方法も知りたいですか？住所フィールドの追加スキームを作成するチュートリアルをご覧ください。
関連
フィルター参照：