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.

Prerequisites

To understand whether you need to define a Google Maps API key in the Plugin’s Settings, and setup billing on Google’s Developer Console, refer to the below table:

Adding: Classic Editor / TinyMCE

To add a Google Map within the Classic Editor:

• Click the Google Map marker icon in the Visual Editor toolbar (the left hand black outline marker):
  
  Don’t see this toolbar or icon? It might not display in Gutenberg or some third party Page Builders.  In those cases, you’ll have to directly insert the manual shortcode text itself, using the parameters listed below.
• Follow the Configuration section below for each of the fields displayed in the modal window:
  

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
  
• Start typing Google Map into the Search for a block field, and click the Google Map option that appears within the Page Generator Pro section
• Follow the Configuration section below for each of the fields displayed in the right hand sidebar’s block panel:
  

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

• 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="roadmap" location="{city}, UK" term="{service}" height="250" zoom="14"]

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

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

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