​PageObject: Google Map

​This PageObject inserts a Google Map to the content. Therefore a Google Maps API Key is required and can be inserted in the website's linkage tab. Without API key no map is shown (although the PageObject can be inserted and configured).

The position marker is placed according to latitude and longitude values. These are generated out of a address, the editor inserts while configuring the PageObject. The address is never part of the generated code. For adjustments (or cases when the automatic geocoding of the address fails) the marker can be repositioned with drag and drop in the configuration menu.

Editors can chose between the default or some custom design for the generated Google Map. The styling code of the custom designs is inserted automatically, so the template developer is not responsible for providing some CSS or JS code for that issue.

The size and positioning of the map should be defined within the template's CSS.

HTML example (system generated)

<div class="fx_po_map">
    <div class="fx_gmap" id="MAP ID">MAP HTML</div>
    <script>MAP SCRIPT</script>
    <script async src="https://maps.googleapis.com/maps/api/js?key=API-KEY&amp;callback=CALLBACK"></script>

​​CSS example (boilerplate)

.fx_gmap {
    height: 250px;
​​Without defining a height in your CSS, maps won't be visible!
​In order to display a Google Map on a website, a Google Maps API Key is required. It is set for each website individually within the website's linkage tab (not within the template).
​This PageObject renders as block element.

​Demo content

Available parameters:

  • latitude: [float] Latitude of the marker position. Optional, default is 52.5162746 (Brandenburg Gate, Berlin).
  • longitude: [float] Longitude of the marker position. Optional, default is 13.377704 (Brandenburg Gate, Berlin).
  • zoom: [int] Zoom level of the Google Map from 1 to 9. Optional, default is 3.
  • style: [string] Styling of the map. Available options are “default”, “greyscale”, “navigation”, “applemap”, “bluewater”, “midnight”, “paledawn”, “mapbox” and “pink”. Optional, default is “default”. (Please refer to the editor's manual of PageObject Google Map for a visual reference of the available styles). 

Configuration example

{{ fx_page.slot("SLOT_NAME", _context, {"content": [
   {"type": "map"}
] }) }}
​For more details how to implement demo content please refer to the Demo Content Documentation.