Google Map Element
The Google Map Element shows one or more locations on a Google map. It is the usual choice for a contact page, a store locator with a few branches or a directions section, and it needs a Google Maps API key.
The element can load the map in three ways. The embed and static versions are simple and free of charge per map load; the JavaScript version is interactive and adds more options, such as several addresses with pins, custom colors, info boxes and your own marker icons.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Google Map Element
First enter your key in Global Options under Contact & Maps, Google Maps API Key. Then add the Google Map Element to a column and choose the Google API Type; Default uses the type set in Global Options. With the Embed API you enter one Address and choose Roadmap or Satellite. With the JS API or Static API the Address field takes several locations separated by |, and coordinates can be written as latlng=12.381068,-1.492711.
Set the Map Dimensions and the Zoom Level for every type. The JS API adds Scrollwheel on Map, the scale and zoom controls, Address Pin Animation and Show Tooltip by Default. Under Select the Map Styling Switch, Theme Styling applies Tirenoa’s own look and Custom Styling unlocks the overlay color, info box content and colors, and custom marker icons.
The Static API delivers the map as a single image. It has its own Map Color and Custom Marker Icon fields; width and height must be given in pixels and are limited to 640px on the standard Google plan. The element always takes the full width on smaller screens.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Google Map. Change them there to style every Google Map at once.
General
| Heading | Description |
|---|---|
| Google API Type | Select the Google API type that should be used to load your map. The JavaScript API allows for more options and custom styling, but could be charged for by Google depending on the amount of map loads. The embed and the static API can be used for free regardless of map loads. For more information please see the Google Maps Users Guide. |
| Address | Add the address of the location you wish to display. Address example: 775 New York Ave, Brooklyn, Kings, New York 11203. If the location is off, please try to use long/lat coordinates. for example 12.381068,-1.492711. |
| Map Type | Select the type of google map to display. |
| Map Dimensions | Map dimensions in percentage, pixels or ems. NOTE: Height does not accept percentage value. In case static API is selected width and height are limited to 640px (except for the premium Google Maps API plan) and must be specified in px only. |
| Zoom Level | Choose the zoom level for the map. 0 corresponds to a map of the earth fully zoomed out, and larger zoom levels zoom in at a higher resolution. |
| Scrollwheel on Map | Enable zooming using the mouse scroll wheel. Use Cmd/Ctrl key + scroll to zoom. If set to no, zooming through two-finger movements (cooperative gesture handling) will be enabled. |
| Show Scale Control on Map | Display the map scale. |
| Show Zoom Control on Map | Display the zoom control buttons. |
| Address Pin Animation | Animate the address pin when the map first loads. |
| Show Tooltip by Default | Display or hide tooltip by default when the map first loads. |
| Select the Map Styling Switch | Choose default styling for classic google map styles. Choose theme styling for our custom style. Choose custom styling to make your own with the advanced options below. |
| Map Overlay Color | Custom styling setting only. Pick any overlaying color for the map besides pure black or white. Works best with “roadmap” type. |
| Map Color | Custom styling setting only. Pick any color for the map besides pure black or white. |
| Infobox Content | Custom styling setting only. Type in custom info box content to replace address string. For multiple addresses, separate info box contents by using the | symbol. for example InfoBox 1|InfoBox 2|InfoBox 3. |
| Infobox Styling | Custom styling setting only. Choose between default or custom info box. |
| Info Box Text Color | Custom styling setting only. Pick a color for the info box text. |
| Info Box Background Color | Custom styling setting only. Pick a color for the info box background. |
| Custom Marker Icon | Custom styling setting only. Use full image urls for custom marker icons or input “theme” for our custom marker. For multiple addresses, separate icons by using the | symbol or use one for all. for example Icon 1|Icon 2|Icon 3. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- The JavaScript API may be charged by Google once a site has many map loads. For a simple location map, the Embed or Static API is often enough.
- Height does not accept a percentage. Use pixels or ems.
- Several markers or info boxes are matched to the addresses in the same order, each separated by
|. One marker icon can also be used for all addresses. - If an address shows up in the wrong place, use coordinates instead.
- With Enable Privacy Consent turned on in Global Options (Privacy), the map only loads after the visitor agrees to external content.
- With Scrollwheel on Map set to No, visitors zoom with Ctrl or Cmd and the scroll wheel, and the page keeps scrolling normally.