Google Map

Display the Google Map field without additional JavaScript code.

To make use of the Google Map field you’ll need to first define the Google Map API key in your theme.

Copy the code snippet below and paste it into your theme’s functions.php file, replacing the ‘YOUR_KEY_HERE’ with your API key. Get Google Maps API key here.

// Google Map API key
add_filter('acf/fields/google_map/api', function ($apiSettings) {
    return array_merge($apiSettings, [
        'key' => 'YOUR_KEY_HERE',
    ]);
});

Assign the Google Map field to your View by selecting it from the Field list.

Field Options (Pro)

Switch to the Field Options tab for more control of your map and its display.

Map Marker Icon - Customize the Map Marker by using your own icon or uploading an image from Flaticon (.png, .jpg allowed). Dimensions of 32x32px is recommended.

Don't use an SVG icon for the marker icon, as there is no way to restrict the dimensions using CSS. Rather upload the correct size .png or .jpg image.

Map Marker icon title - Shown when mouse hovers on Map Marker.

Hide Map - The Google Map is shown by default. Turn on the switcher to hide the map.

Show address from the map - The address is hidden by default. Turn this on to show the address from the map.

Map address format - By Default the address format is street number, street name, city, state, post code and country. You can change the order or hide some parts by using the provided variables in your Custom Template.

$street_name$, $city$, $state$, $post_code$, $country$

Step by step guide

See guide for using ACF Image as Map Marker.

FAQs

How do I change the map height?

Change the height of the Google Map, visit the field group in ACF and define the ‘Height’ in px. Alternatively, define the height using CSS by copying the snippet below into your View CSS Code field in the CSS & JS tab.

/* Define the height of the Google Map */
#views__map {
height:600px;
}