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 Road Maps, Satellite, 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

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"]

The Configuration section below details each parameter and its accepted values.

Configuration

Depending on the Map Type chosen, the following options are available.

Road Map

The Show Place Name and Marker option is available in Page Generator Pro 3.0.2, releasing Thursday January 21st 2021 23:59 UTC.
  • Location / Origin: Enter the city and country (or keyword, if you have one that has keyword data comprising of cities and/or countries).
  • Term: Optional. If specified, will plot matching businesses in the given location.  For example, to display Restaurants, you would enter Restaurants as the Term.
  • Show Place Name and Marker?
    • If enabled, the Place Name is displayed in the top left corner of the map. A red marker is displayed in the center of the map.
    • If disabled, no Place Name is displayed. No red marker is displayed.
  • Height: The height of the Google Map, in pixels.
  • Zoom Level: Choose a zoom level for the Map.  A higher number means the map will be more zoomed in.

A shortcode will then appear within the content:
[page-generator-pro-google-map maptype="roadmap" location="{city}, UK" term="{service}" height="250" zoom="14"]

Parameter Accepted Value Description
maptype roadmap 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 Optional service to plot on the map. For example, restaurant would display a marker showing the nearest restaurant to the given location.
show_place_card_marker 0,1 0: No Place Name is displayed. No red marker is displayed.
1: The Place Name is displayed in the top left corner of the map. A red marker is displayed in the center of the map.
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

Satellite

  • Location / Origin: Enter the city and country (or keyword, if you have one that has keyword data comprising of cities and/or countries).
  • Term: Optional. If specified, will plot matching businesses in the given location.  For example, to display Restaurants, you would enter Restaurants as the Term.
  • Height: The height of the Google Map, in pixels.
  • Zoom Level: Choose a zoom level for the Map.  A higher number means the map will be more zoomed in.

A shortcode will then appear within the content:
[page-generator-pro-google-map maptype="satellite" location="{city}, UK" term="{service}" height="250" zoom="14"]

Parameter Accepted Value Description
maptype 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 Optional service to plot on the map. For example, restaurant would display a marker showing the nearest restaurant to the given location.
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

Driving Directions

  • Location / Origin: Enter the starting zip code or city (or keyword, if you have one that has keyword data comprising of zip codes and/or cities).
  • Destination: Enter the destination zip code or city.
  • Height: The height of the Google Map, in pixels.
  • Zoom Level: Choose a zoom level for the Map.  A higher number means the map will be more zoomed in.

A shortcode will then appear within the content:
[page-generator-pro-google-map maptype="directions" location="{city}, UK" destination="B1 2JB" height="250" zoom="14"]

Parameter Accepted Value Description
maptype roadmap 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
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

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.
  • Zoom Level: Choose a zoom level for the Map.  A higher number means the map will be more zoomed in.

A shortcode will then appear within the content:
[page-generator-pro-google-map maptype="streetview" location="{city}" country_code="GB" height="250" zoom="14"]

Parameter Accepted Value Description
maptype 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%
zoom 0 to 21 The zoom level of the map.  A higher number means more detail
Shortcode not working? Your location might need to comprise of both a city / town and country.

Common Issues

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.