Generate: Dynamic Elements: Google Map

The Google Map Dynamic Element inserts a Google Road Map, Satellite Map, Driving Directions or Street View into the content, depending on the given parameters.

There is no limit or billing requirements from Google for using Maps, Driving Directions and Street View.

Adding: Classic Editor / TinyMCE

To add a Google Map within the Classic Editor:

  • Ensure that you’re using the Visual Editor by clicking the Visual tab:
    Page Generator Pro: Dynamic Elements: TinyMCE: Visual Editor Tab
  • Click the Google Map marker icon in the Visual Editor toolbar (the left hand black outline marker):
    Page Generator Pro: Dynamic Elements: Icons: Classic Editor

Adding: Classic Editor / TinyMCE: Text Editor

If you’re using the Text editor instead of the TinyMCE Visual Editor above:
Page Generator Pro: Dynamic Elements: TinyMCE: Text Editor Tab

  • Click the Google Map button in the toolbar:
    Page Generator Pro: Dynamic Elements: TinyMCE: Text Editor: Buttons

Adding: Gutenberg

To add a Google Map within Gutenberg:

  • Click the plus icon between two existing blocks, or towards the top left corner of the Gutenberg editor
    Page Generator Pro: Generate: Dynamic Elements: Gutenberg: Add Block
  • Start typing Google Map into the Search for a block field, and click the Google Map option that appears within the Page Generator Pro sectionPage Generator Pro: Generate: Dynamic Elements: Gutenberg: Search Blocks: Google Maps
  • Follow the Configuration section below for each of the fields displayed in the right hand sidebar’s block panel:
    Page Generator Pro: Generate: Dynamic Elements: Gutenberg: Search Blocks: Google Maps: Sidebar
Don’t see a right hand sidebar block panel when adding/editing a Dynamic Element? Be sure to click the Settings cog icon on the top right of the Gutenberg screen.

Adding: Page Builders

To add a Google Map within any Page Builder that supports a Text Editor widget/module using the Classic Editor (sometimes known as TinyMCE), refer to the Classic Editor instructions above.

Refer to the Dynamic Elements Documentation for details specific to your Page Builder.

If your Page Builder does not provide a Text Editor widget/block that uses the Classic Editor, you can still use Dynamic Elements.  However, you’ll need to manually build the Google Maps shortcode, inserting it into your Page Builder’s content – for example:
[page-generator-pro-google-map maptype="roadmap" location="{city}, UK" term="{service}" height="250" zoom="14"]

Changes to the configuration of the Google Maps Dynamic Element were added to Page Generator Pro 3.4.0, releasing Thursday September 2nd 2021 23:59 UTC. These reflect the revised functionality of Google Maps Embed API.  Whilst every best effort has been made to ensure maps from previous versions work, it is strongly advised to update Google Map Dynamic Elements in Content Groups prior to further generation.

Configuration

Configuration of the Google Map will depend on the Map Mode that is selected:
Page Generator Pro: Dynamic Elements: Google Maps: TinyMCE Modal

Map Mode Value Description
Location place Displays a Google Map of the given location, denoted by a map marker / pin.
Location without Marker view Displays a Google Map of the given location, excluding the place name and marker.
Place(s) / Business(es) in Location search Displays a Google Map of the given location, plotting the matching place(es) based on the term provided.
Directions directions Displays a Google Map showing directions between two places.
Street View streetview Displays Google’s Street View for the given location.

Location Map

The location map displays a Google Map of the given location, denoted by a map marker / pin.
Page Generator Pro: Dynamic Elements: Google Maps: Map Mode: Location

  • Map Mode: Location
  • Map Type:
    • Road Map: Display Google’s Road Map imagery
    • Satellite: Display Google’s Satellite imagery
  • Location / Origin: Enter the city and country (or keyword, if you have one that has keyword data comprising of cities and/or countries).
  • Height: The height of the Google Map, in pixels.
  • Zoom Level: Choose a zoom level for the Google Map.  A higher number means the map will be more zoomed in.

When directly entering a shortcode, the following syntax must be used:
[page-generator-pro-google-map map_mode="place" maptype="roadmap" location="{city}, UK" height="250" zoom="14"]

Parameter Accepted Value Description
map_mode place Displays the location map
maptype roadmap,satellite The map type to display
location string or keyword The location to display the marker on the map.  This should include a country, for example {city}, UK
height integer The height of the map, in pixels.  Width is always 100%
zoom 0 to 21 The zoom level of the map.  A higher number means more detail

Location without Marker

Prior to Page Generator Pro 3.4.0, this functionality is achieved by disabling the Show Place Name and Marker parameter.

The location without marker map displays a Google Map of the given location, excluding the place name and marker.
Page Generator Pro: Dynamic Elements: Google Maps: Map Mode: Location without Marker

  • Map Mode: Location without Marker
  • Map Type:
    • Road Map: Display Google’s Road Map imagery
    • Satellite: Display Google’s Satellite imagery
  • Location / Origin: Enter the city and country (or keyword, if you have one that has keyword data comprising of cities and/or countries).
  • Height: The height of the Google Map, in pixels.
  • Zoom Level: Choose a zoom level for the Google Map.  A higher number means the map will be more zoomed in.

When directly entering a shortcode, the following syntax must be used:
[page-generator-pro-google-map map_mode="view" maptype="roadmap" location="{city}, UK" height="250" zoom="14"]

Parameter Accepted Value Description
map_mode view Displays the location map
maptype roadmap,satellite The map type to display
location string or keyword The location to display the marker on the map.  This should include a country, for example {city}, UK
height integer The height of the map, in pixels.  Width is always 100%
zoom 0 to 21 The zoom level of the map.  A higher number means more detail

Place(s) / Business(es) in Location

The place(s) / business(es) in location map displays a Google Map of the given location, plotting the matching place(es) based on the term provided.
Page Generator Pro: Dynamic Elements: Google Maps: Map Mode: Place(s) / Business(es) in Location

  • Map Mode: Place(s) / Business(es) in Location
  • Map Type:
    • Road Map: Display Google’s Road Map imagery
    • Satellite: Display Google’s Satellite imagery
  • Location / Origin: Enter the city and country (or keyword, if you have one that has keyword data comprising of cities and/or countries).
  • Term: Enter the business(es) / landmark(s) to plot on the map. The more precise the Term, the fewer results that will be displayed. For example
    • Restaurants will display business(es) that are classified as restaurants
    • Five Guys will display all Five Guys businesses within the given Location and Zoom Level.
  • Height: The height of the Google Map, in pixels.
  • Zoom Level: Choose a zoom level for the Google Map.  A higher number means the map will be more zoomed in, showing fewer places / businesses

When directly entering a shortcode, the following syntax must be used:
[page-generator-pro-google-map map_mode="search" maptype="roadmap" location="{city}, UK" term="restaurants" height="250" zoom="14"]

Parameter Accepted Value Description
map_mode search Displays the location map
maptype roadmap,satellite The map type to display
location string or keyword The location to display the marker on the map.  This should include a country, for example {city}, UK
term string or keyword The place(s) / business(es) to plot on the map. For example, restaurants or {service}
height integer The height of the map, in pixels.  Width is always 100%
zoom 0 to 21 The zoom level of the map.  A higher number means more detail

Directions

The Directions map displays a Google Map showing directions between two places.
Page Generator Pro: Dynamic Elements: Google Maps: Directions

  • Map Mode: Directions
  • Map Type
    • Road Map: Display Google’s Road Map imagery
    • Satellite: Display Google’s Satellite imagery
  • Location / Origin: Enter the city and country (or keyword, if you have one that has keyword data comprising of cities and/or countries).
  • Destination: Enter the destination
  • Method of Travel: Displays directions based on the chosen method of travel:
    • Driving
    • Walking
    • Cycling
    • Public Transport / Transit
    • Flying
  • Height: The height of the Google Map, in pixels.
Since Page Generator Pro 3.4.0, the zoom parameter has been deprecated. This is by design, to ensure that the map shows full directions, including the start and end points. Setting a zoom may incorrectly result in the map being cut off, forcing the user to zoom out to see the required directions.

When directly entering a shortcode, the following syntax must be used:
[page-generator-pro-google-map map_mode="directions" maptype="roadmap" location="{city}, UK" destination="London, UK" mode="driving" height="250"]

Parameter Accepted Value Description
map_mode directions Displays the location map
maptype roadmap,satellite The map type to display
location string or keyword The location to display the marker on the map.  This should include a country, for example {city}, UK
destination string or keyword The destination
mode driving,walking,bicycling,transit,flying The method of travel
height integer The height of the map, in pixels.  Width is always 100%

Street View

The Street View mode displays Google’s Street View for the given location.
Page Generator Pro: Dynamic Elements: Google Maps: Street View

  • Map Mode: Street View
  • Location / Origin: Enter the zip code and/or address (or keyword, if you have one that has keyword data comprising of zip codes and/or addresses).
  • Country: Select the country the Location above belongs to.
  • Height: The height of the Google Map, in pixels.

When directly entering a shortcode, the following syntax must be used:
[page-generator-pro-google-map map_mode="streetview" location="{city}" country_code="GB" height="250"]

Parameter Accepted Value Description
map_mode streetview The map type to display
location string or keyword The street view location. Either a zip code or address.
country_code string or keyword The two character country code for the location above.
height integer The height of the map, in pixels.  Width is always 100%

Common Issues

Incorrect Location on Map

Your location parameter might need to comprise of both a city / town and country.

Map Layout Incorrect

Page Generator Pro will only output the CSS required for column display when the Google Map Dynamic Element is detected. However, this detection might not be possible if the element is used within a Page Builder.

This is deliberate and by design, to ensure that unnecessary CSS is not loaded site wide.

To resolve:

  • Copy the contents of the Plugin’s assets/css/frontend.css file
  • Navigate to WordPress Admin > Appearance > Customize
    Page Generator Pro: Appearance: Customize
  • Click Additional CSS
    Page Generator Pro: Appearance: Customize: Additional CSS
  • Paste in the contents of the Plugin’s assets/css/frontend.css file
    Page Generator Pro: Appearance: Customize: Pasted CSS
  • If a CSS Prefix is defined at Settings > General, you’ll need to replace page-generator-pro with said CSS Prefix in the Additional CSS.  For example, if your CSS Prefix is my-custom-site, you’ll replace page-generator-pro with my-custom-site
  • Click the Publish button
    Page Generator Pro: Appearance: Customize: Publish

Should this not resolve, you would need to work with your Theme provider to ensure that applicable CSS does not override that provided by Page Generator Pro.