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 than 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 Multiple Locations Query.

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

Read more...


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

Read more...


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?