Dynamic Google Maps
Updated over a week ago

To use this widget you need to set Google Maps API. With the Dynamic Google Maps widget you can create an interactive map interface that uses:

Query Type

  • Address
    In this case, you can insert the address.

  • Latitude and Longitude
    You must insert the values in Decimal degrees.
    If you want to get the coordinates of a place on your computer, open Google Maps. If you're using Maps in Lite mode, you will see a lightning bolt at the bottom and you won't be able to get the coordinates of a place. Right-click the place or area on the map. Select What's here? At the bottom, you’ll see a card with the coordinates.

  • ACF Google Map field
    You must select the name of your field.
    Use the value set in the current post. If set in a template, the value will be dynamic and variable based on the post used by the template. On this data type, you can choose to use the Multiple Locations Query.

  • Meta Box Google Map Field:

    If you are using Meta Box Google Map Field, you can use the to show location on the map.


Multiple Locations Query

If you are using ACF or Meta Box Custom field in the data type, you can enable Multiple Locations. To show multiple locations on the map you can enable the Query. This query is basically the posts that would be 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.

  • 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 behavior can be controlled using this option.

  • InfoWindow: An InfoWindow displays content in a popup window above the map, at a given location.


Map Type


Marker

The position on the map is identified by a marker. 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 in the management of the single post.

WordPress Media Library

Using Dynamic Tags

You can assign the markers dynamically:

  • click on Dynamic Tags, be sure of having 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

0bd32de601dd8f324c2a24c15c2fe963.png

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.

Did this answer your question?