Map

Purpose

The Map field uses a Google Maps map with a search-bar, which allows the visual selection of locations.

Settings

API Key

The Google Maps API requires an API key in order to function properly and not to generate console warnings. Please generate an API key for your project before proceeding.

In the interface, please go to Ultimate Fields > Settings and enter the API key in the "Google Maps API Key" field.

If you are using PHP you have two options:

1. Use the set_api_key method of the field.
2. Use the uf.field.map.api_key filter.

// Use a global filter
add_filter( 'uf.field.map.api_key', 'my_api_key' );
function my_api_key() {
	return 'AIzaSyCmiGD2rK9-e_-excC1iv6h9Q6iIs1ftn4';
}

// Use the method
$fields = array(
	Field::create( 'map', 'office_location' )
		->set_api_key( 'AIzaSyCmiGD2rK9-e_-excC1iv6h9Q6iIs1ftn4' )
);

In order to avoid the accidental distribution of your private API keys, please avoid saving them in your theme/plugin. It is a much better idea to define a constant in wp-config.php and use it in the theme/plugin.

Height

You can change the height of the map in the field. By default it is set to 400 pixels.

In the UI, use the "Height" field in the field settings.

In PHP, use the set_height( $height ) method. It accepts either a simple integer number or a height in pixels.

Field::create( 'map', 'my_map' )->set_height( 600 )

Output Dimentions

When you use a map field in combination with the_value() in the front-end, Ultimate Fields will load and display an actual map. You can adjust the width and height of the map:

• In the "Output Settings" tab in the interface.
• WIth the set_output_height and set_output_width methods of the field.

Field::create( 'map', 'office_location )
	->set_output_width( '100%' )
	->set_output_height( 300 )

Usage

Using the value of a Map field with the_value or the_sub_value will load and display a Google Map.

Using it with get_value will return an array, which looks like this:

<?php
print_r( get_value( 'office_location', 'option' ) );

// Output:
Array
(
	// Latitude - Longitude position
    'latLng' => array(
        'lat' => 48.2081743
        'lng' => 16.3738189
    ),

	// Saved zoom
	'zoom' => 11,

	// Input in the search field, as well as the parts associated with it
    'address' => 'Vienna, Austria',
    'addressParts' => array( 'Vienna', 'Vienna', 'Austria' )
)