How to Change 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.

Setting up Geolocation and your form

For the purpose of this tutorial, we’ve already set up our Geolocation addon and create a new form that has the Address field on the form which has the Enable Address Autocomplete as well as displaying the map below the form.

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 Geoloaction 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 );

This snippet will work for Google Places as well as the Algolia Places.

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

This snippet will also work for both Google Places and Algolia Places.

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.

Now you can change the default location and the zoom level on both Google Places and Algolia Places

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.

Filter References:

FAQ

Q: How can I change the language for Algolia Places?

A: To change the default language for Algolia Places, use this snippet.

/**
 * Change language for Algolia Places.
 *
 * @link    https://wpforms.com/developers/how-to-change-default-location-for-geolocation-addon/
 */
function wpf_wpforms_geolocation_place_providers_algolia_places_get_language() {
  
   // Use the 2 letters of your language. https://www.sitepoint.com/iso-2-letter-language-codes/
   
   // Try to get the current language and if it is impossible, use English.
   return 'de';
	
}
add_filter( 'wpforms_geolocation_place_providers_algolia_places_get_language', 'wpf_wpforms_geolocation_place_providers_algolia_places_get_language', 10);