To use this widget, you need to set up Google Maps API.
With the Dynamic Google Maps widget, you can create an interactive map interface that uses the following:
Address
In this case, you can insert the address.Latitude and Longitude
You must insert the values in Decimal degrees.
ACF Google Map field
You must select the name of your field.
You can use the value set in the current post. If put in a template, the value will be dynamic and variable based on the post used by the template. You can use the Multiple Locations Query on this data type.Meta Box Google Map Field
If you are using Meta Box Google Map Field, you can use it to show location on the map.
Multiple Locations Query
If you are using ACF or Meta Box fields in the data type, you can enable Multiple Locations. To show multiple locations on the map you can allow the Query. This query consists of the posts considered for retrieving the map field.
Query Type
Custom Post Type: Here you can choose the post type that contains the Google Map Custom field. You can further filter it through taxonomy terms.
Dynamic Current Query: You can apply the current post/page query.
Search & Filter Pro: set the query setup in Search & Filter Plugin. It supports Search & Filter Pro version 2 or 3.
From Specific Posts: select the specific posts manually.
ACF Relationship: select the posts from the ACF relationship field.
ACF Repeater: for this query to work properly, you first need to select the Google Map subfield of the repeater in Data Type.
Controlling
Geolocation: display the geographic location of the user on the map, using the browser's HTML5 Geolocation.
Scroll: When a user scrolls a page that contains a map, the scrolling action can unintentionally cause the map to zoom. This option can control this behavior.
InfoWindow: An InfoWindow displays content in a popup window above the map at a given location.
API Version
Dynamic Google Maps allows a choice between new and old APIs. The new API introduces a new default color palette, improving map experiences and usability. As of February 2025, the old APIs will no longer be available, and all services will be automatically transitioned to the new API. The activation of the new APIs does not allow map customization. We are looking for a possible solution to make it feasible in the future.
Map Type
Marker
A marker identifies the position on the map. You can choose it from:
ACF Image Field
You could use a customized ACF Image Field set to the post in addition to the Google Map Field.
The meta box is used to manage the single post.
WordPress Media Library
Using Dynamic Tags
You can assign the markers dynamically:
Click on Dynamic Tags, and have the Marker > Map (ACF) option cleared.
Select the dynamic source you want to use for the Markers:
We used the Featured Image from the posts for this example.
The Featured Image inside of the post will replace the Marker:
At last, the final result, the marker inside of the map, replaced by the featured image
InfoWindow
Controls
1 - The Map Type control is available in different styles and it allows the user to choose a map type (Roadmap, Satellite, Hybrid, or Terrain). This control appears by default on the top left corner of the map.
2 - The Pan control displays a pan control for panning the map.
3 - The Rotate control provides a combination of rotation options for maps containing oblique images. This control appears by default on the bottom right of the map. See 45° imagery for more information.
4 - The Scale control displays a map scale element. This control is disabled by default.
5 - The Street View control contains a Pegman icon which can be dragged into the map to enable the Street View. This control appears by default on the bottom right of the map.
6 - The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. This control appears by default on the bottom right corner of the map.
7 - The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices. Note: iOS doesn't support the fullscreen feature.
8 - To see how Marker Clustering works, take a look at the map below.
