Advanced Views Docs
Live PlaygroundDownload PluginGet PRO
  • 💡Help Centre
  • ⚡Getting Started
    • Introduction
      • Key Aspects
      • Creating Your First View
      • Creating Your First Card
      • Plugin Terms
      • Plugin Interface
        • Field Options
    • Installation
      • Advanced Views Lite
      • Advanced Views Pro
      • Comparison Table
      • Upgrading from Lite to Pro
    • Supported data vendors
    • Starter theme
  • 🌟Display Content
    • WordPress
      • Post
      • Taxonomy terms
      • User
      • Comments
      • Menus
    • WooCommerce Product
    • Meta fields
      • Basic fields
        • Number
      • Content fields
        • Image
        • File
        • WYSIWYG
        • oEmbed
        • Gallery
      • Choice fields
        • Select/checkbox/radio
        • True / False
      • Relationship fields
        • Link
        • Post_object
        • Page Link
        • Relationship
        • Taxonomy
        • User
      • Advanced fields
        • Google Map
        • Google Map Multiple Markers
        • ACF OpenStreetMap Field
        • Date/time picker
      • Layout fields
        • Group (Pro)
        • Repeater (Pro)
        • Flexible (Pro)
    • Object fields
    • Custom Data (Pro)
    • Custom Gutenberg Blocks (Pro)
    • Mount Points (Pro)
    • Front-end assets management (Pro)
  • 🦸‍♂️Query Content
    • Basic Filters
    • Meta Filters (Pro)
      • Current Post
      • Comparison
      • Dynamic Injection
    • Taxonomy Filters (Pro)
    • Pagination (Pro)
    • Custom Data (Pro)
  • 🏆Shortcode Attributes
    • Common Arguments
    • View Shortcode
    • Card Shortcode
  • 🧙‍♂️Templates
    • Customizing the Template
    • Template engines
      • Twig
      • Blade
    • CSS & JS
      • BEM Methodology
      • WordPress Interactivity API
    • File system storage
    • Pre-built components
    • Reusable components library (Pro)
    • Live reload
    • Multilingual
    • Custom Ajax & Rest API (Pro)
  • ☕Guides
    • Display Custom Post Type (CPT) on another post
    • Display Employees (CPT) of a Company (CPT)
    • Display Nested Repeater Fields
    • Map Marker from ACF Image
    • Display all CPT items on a single map
  • 🛠️Tools
    • Export/Import
    • Demo Import
    • Settings
    • Preview
  • 🏹Troubleshooting
    • Compatibility
    • Report a bug
    • Payment Issues
    • Lite Support (Forum)
    • Pro Support
  • ⚙️Customization
    • Filters and Hooks
      • View
      • Card
    • Suggest a feature
    • Performance
Powered by GitBook
On this page
  • Field Options (Pro)
  • Step by step guide
  • See it in action
  • Displaying multiple CPT items on a single map
  • FAQs

Was this helpful?

  1. Display Content
  2. Meta fields
  3. Advanced fields

Google Map

PreviousAdvanced fieldsNextGoogle Map Multiple Markers

Last updated 8 months ago

Was this helpful?

AVF supports the Google map field types (e.g. ), and allows to display the Map without additional JavaScript code.

To make use of the 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. .

// 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.

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 it in action

Displaying multiple CPT items on a single map

This page focuses on embedding single maps on individual pages or Custom Post Type items. However, there are scenarios where displaying multiple CPT items on a single map is essential. For example, if you’re managing an "events" CPT, you might need to showcase all events on a single map to provide a comprehensive view of all locations.

The process leverages ACF to store item coordinates as post meta, allowing you to query these CPT items and render them as markers on a unified map.

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

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

See guide for using .

and Navigate to Display Meta fields > Advanced fields.

For a step-by-step guide on this, refer to the "" section in our blog article.

🌟
Flaticon
ACF Image as Map Marker
Visit the Playground
CPT items map
ACF Google map field
Google Map field
Get Google Maps API key here