How to Change the Default Location for Geolocation Addon

Introduction

Would you like to change the default location that loads on the map when using the Geolocation addon? Or maybe you’d like to change the zoom? Did you know with a couple of small snippets you can change both? In this tutorial, we’ll walk you through how to set the default location of the map when the form loads as well as the zoom level.

Creating the form

To begin, we’ll start by creating our form and adding our fields which will include at least one Address form field.

If you need any help in creating your form, please see this documentation.

Enabling the Map

Next, we’re going to click on the Address form field and then click the Advanced tab.

Scroll down to the options and click to enable the Enable Address Autocomplete setting which will then allow you to also click to enable the Display Map setting. Next, we’ll select to show the map Below field.

If you need any help setting up your Geolocation addon settings or adding the map to your form, please review this documentation.

Changing the default location

To change the default location, you’ll need to add this code snippet to your site.

If you need help adding snippets to your site, please review this tutorial.

/**
 * 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 );

In our snippet, we’re setting the latitude and longitude of where the pin on the map will display when the page loads. If you’re not sure what these numbers should be, you can visit Google’s page to find these coordinates.

Changing the zoom level on your map

To change the zoom level, you’ll just need to copy this snippet in the same way you added the previous snippet. You can use both snippets so that you can change the default and the zoom level together.

/**
 * 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 );

In this snippet, there are two different zoom levels that you can see in the comments. One is for the entries page and the other is for the map that displays on your form. You can either comment out the lines you don’t want or need or just remove them completely.

And that’s all you need! Would you like to also know how to create your own address scheme to use for your forms? Take a look at our tutorial on How to Create Additional Schemes for the Address Field.

Related

Filter References:

• wpforms_geolocation_map_default_location
• wpforms_geolocation_map_zoom