Documentation

Generate: Dynamic Elements: OpenStreetMap

Documentation »

Page Generator Pro » Generate: Dynamic Elements: OpenStreetMap

The OpenStreetMap shortcode inserts an OpenStreetMap Map, Satellite Map, depending on the shortcode’s parameters.

Adding: Classic Editor / TinyMCE

To add an OpenStreetMap 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 OpenStreetMap icon in the Visual Editor toolbar:
    Page Generator Pro: Shortcodes: Open Street Map: Icon

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 Open Street Map button in the toolbar:
    Page Generator Pro: Dynamic Elements: TinyMCE: Text Editor: Buttons

Adding: Gutenberg

To add an OpenStreetMap 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 Open Street Map into the Search for a block field, and click the Open Street Map option that appears within the Page Generator Pro section
    Page Generator Pro: Generate: Dynamic Elements: Open Street Map: Search Blocks
  • 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: Open Street Map: Sidebar

Adding: Page Builders

To add an OpenStreetMap 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 shortcode, inserting it into your Page Builder’s content – for example:

[page-generator-pro-open-street-map parameter="value" ...]

ParameterAccepted ValueDescription
locationstring or keywordThe location to display the marker on the map
countrystring or keywordThe country that the above location is in
heightintegerThe height of the map, in pixels.  Width is always 100%
zoom0 to 21The zoom level of the map.  A higher number means more detail

Configuration

Page Generator Pro: Generate: Shortcodes: Open Street Map: TinyMCE Modal

  • Location: Enter the ZIP Code, City, County or State/Region (or keyword, if you have one that has keyword data comprising of this location data).
  • Country Code: Select the Country the above Location is in.
  • Height (px): The height of the Map, in pixels.
  • Zoom Level: Choose a zoom level for the Map.  A higher number means the map will be more zoomed in.

Configuration: Errors

The Errors section is available in Page Generator Pro 4.9.3 and higher, releasing Monday January 6th 2025 23:59 UTC.  Ensure that your license is valid, not expired and that you’ve updated to the latest version of the Plugin.
Page Generator Pro: Dynamic Elements: Errors

Ignore Errors

If enabled, an error returned from the Dynamic Element will result in blank content output, instead of an error preventing generation of the entire Page / Post / Custom Post Type.

This setting may be useful if you don’t require the Dynamic Element to always return content output.

This setting is ignored when using Test mode. If the Dynamic Element produces an error, it will always be reported in Test mode, to assist with debugging.

Common Issues

Map Layout Incorrect

Page Generator Pro will only output the CSS required for column display when the OpenStreetMap 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.


Published

Last Updated