Google MapPRO

#Advanced Google Map

The Advanced Google Map is a collection of new settings added to the ACF Google Map Field that allow developers to have more control over the field behavior. This new settings also include a live preview of the field to show how it will be rendered in the post edit screen.

#Field Settings

#Render on Front-end

You can use the acfe_render_google_map() helper to render any Google Map on the front-end. Usage example:

/**
 * acfe_render_google_map
 *
 * @param  $selector  (optional) The field name/key
 * @param  $post_id   (optional) The post id
 */
acfe_render_google_map([selector = ''], [$post_id = 0]);

You can also pass a list of arguments instead, for more advanced customization.

/**
 * acfe_render_google_map
 *
 * @param  $args  (optional) The render arguments
 */
acfe_render_google_map([$args = array()]);

$args = array(
    'selector'           => '',                    // the google map field (optional)
    'post_id'            => 0,                     // the post id to retrieve the field (optional)
    'id'                 => '',                    // the id (for hooks usage)
    'class'              => 'google-map',          // the created map container class
    'height'             => 400,                   // default height
    'zoom'               => 4,                     // default zoom
    'min_zoom'           => 2,                     // minimum allowed zoom
    'max_zoom'           => 21,                    // maximum allowed zoom
    'center_lat'         => 47.127568043756824,    // default map position (without marker)
    'center_lng'         => 8.479324347764278,     // default map position (without marker)
    'map_type'           => 'roadmap',             // default map type
    'hide_ui'            => false,                 // completely hide UI
    'hide_zoom_control'  => false,                 // hide & remove zoomable function
    'hide_map_selection' => false,                 // hide map type selection (satellite...)
    'hide_fullscreen'    => false,                 // hide fullscreen icon
    'hide_streetview'    => false,                 // hide google streetview function
    'disallow_move'      => false,                 // disallow movable map
    'style'              => false,                 // custom map style
    'markers'            => array(),               // custom markers
    'api_key'            => 'ACF_API_KEY_SETTING', // the Google Map API key
);

Using the advanced customization, it is possible to retrieve a Google Map field and override specific settings only.

In this example, we retrieve the field my_google_map, and override the “Height” and the “UI” defined in the WP Admin:

acfe_render_google_map(array(
    'selector' => 'my_google_map', // retrieve 'my_google_map'
    'post_id'  => 45,              // from the post id: 45
    'height'   => 600,             // override the height
    'hide_ui'  => true,            // hide the UI
));

It is also possible to simply display a custom Google Map, without any field in the WP Admin. Usage example:

// render a map centered on Paris
acfe_render_google_map(array(
    'center_lat' => 45.7765087,
    'center_lng' => 4.8329508,
    'height'     => 400,
));

Following this logic, you can also add your own custom markers:

acfe_render_google_map(array(
    'class' => 'my-map',
    'markers' => array(
        array(
            'lat' => 46.204653767315,
            'lng' => 6.0758437428116,
            'icon' => '',
            'content' => 'Modal content',
        ),
        array(
            'lat' => 42.25181167315,
            'lng' => -4.6028671946884,
            'icon' => '',
            'content' => 'Modal content',
        ),
    ),
));

Note: If you prefer to render the Google Map by yourself, you can retrieve the field settings such as Height, Marker Image, Map Style etc… with the get_field_object() helper function. See documentation.