Google Maps Block
Kadence features the Google Maps Block to display maps and locations on your website. You can easily customize these maps and use them across your site. Our Google Maps Block works seamlessly with our default API key, but if you have a Google API Key, you can also use it. Additionally, we offer the ability to use Dynamic Sources from Custom Fields, such as a custom Text Field.
Live Preview/Demo
General Settings
Map Location: Here, you can set the Map Location using the Address/Location of your choice. Some locations, such as the Golden Gate Bridge, can be called by name.
Zoom: Control the distance of the Zoom within the embedded map.
Map Type: The Map Type can be set to either a Road Map or a Satellite view.
Map Filter: You can apply a filter to your map. The available options are Grayscale, Invert, Saturation, or Sepia.
Obtaining an API Key
Our block automatically includes an API key. However, you can use a custom key. You must use a Custom Key to use the Javascript API.
You can follow the instructions in This Guide on creating an API key.
The Maps Embed API is a required permission to use this feature.
Google Maps API
If you have access to a Google Maps API key, you can access a few more options. To enable the Javascript API for the Google Map, add your API key in the API Settings. Enable the option to “Use Javascript API”, and press the save button. Afterward, you’ll see new options to “Show Marker” and to change the “Map Style.” A Google Maps API key is required to use geographic coordinates as a location.
Dynamic Location Options (Blocks Pro)
Kadence Blocks Pro offers the ability to select a Dynamic Source for the map location. This can be used to apply a Text Custom Field as the map location dynamically. This can also be done using an ACF Google Maps Field.
When using an ACF Google Maps Field, the custom field must be manually selected and added via a custom input. To do this, choose the Custom Input option under the Custom Field dropdown when selecting Dynamic Content.
Then, under the Custom Meta Key, use the name of the Custom Maps Field. (This can be found by editing the Field Group and looking under the name row)
Style Settings
Height: Add a Height to the Map. This by default is set to 450px. This can be adjusted for Desktop, Tablet, and Mobile devices.
Max Width: This setting controls the Max Width of the Google Map. It will by default take up the available space. However, this setting can limit that for Desktop, Tablet, and Mobile devices.
Advanced Settings
Padding: Apply a Padding to your Map.
Margin: Apply a Margin to your Map.
Block Defaults: You can save your Block Settings as a default. Learn more here.
Conditional Display (Blocks Pro): Blocks Pro users can enable and use a Conditional Display here.
Additional CSS Class(es): Add Custom CSS class(es) to your Maps Block.
