Overview

The map field creates a Google Maps where you can select a location. This field comes along with a text field for address input, which has the autocomplete feature. The data for address autocomplete is get from Google Maps Geocode service.

You also can pick a location simply by clicking on the map or drag and drop the marker.

Screenshot

Settings

Besides the common settings, this field has the following specific settings:

Note that in order to make the map works, you need to create a text field for address and pass its ID to the map’s address_field.

The address_field can be also a list of text input fields’ IDs, separating by commas. For example: street,city,state. But in that case, there’s no autocomplete for address. Instead of that, when you click the Find Address button (below the map), the field will search for the address combined from values of those fields and set the location for the map.

Sample code

// Address field.
array(
    'id'   => 'address',
    'name' => 'Address',
    'type' => 'text',
),
// Map field.
array(
    'id'            => 'map',
    'name'          => 'Location',
    'type'          => 'map',

    // Default location: 'latitude,longitude[,zoom]' (zoom is optional)
    'std'           => '-6.233406,-35.049906,15',

    // Address field ID
    'address_field' => 'address',

    // Google API key
    'api_key'       => 'XXXXXXXXX',
),

Data

This field saves the location in the following format latitude,longitude,zoom.

Template usage

Displaying the map

To display map field in the frontend, we use the rwmb_meta() helper function, but we need to add more parameters:

$args = array(
    'width'        => '640px',
    'height'       => '480px',
    'zoom'         => 14,
    'marker'       => true,
    'marker_title' => 'Click me',
    'info_window'  => '<h3>Title</h3><p>Content</p>.',
);
echo rwmb_meta( 'field_id', $args );

The code below shows how to use js_options for advanced control how the map is displayed:

$args = array(
    'width'      => '640px',
    'height'     => '480px',
    'js_options' => array(
        'mapTypeId'   => 'HYBRID',
        'zoomControl' => false,
    )
);
echo rwmb_meta( 'field_id', $args );

Read more about rwmb_meta().

Getting field value

In case you don’t want to display the map, but get the location’s latitude and longitude, use the code below:

$location = rwmb_get_value( $field_id );
echo $location['latitude'];
echo $location['longitude'];
echo $location['zoom'];

Read more about rwmb_get_value().

Outputting a map in a group

If you have a map inside a cloneable/non-cloneable group, then the helper functions above doesn’t work. In that case, you can use a helper function in the plugin to show the map.

$group_values = rwmb_meta( 'group_id' );
// If group is cloneable
foreach ( $group_values as $group_value ) {
    echo RWMB_Map_Field::render_map( $group_value['map_id'] );
}

The helper function RWMB_Map_Field::render_map accepts 2 parameters: