Business · Gutenberg
Google Map block for WordPress
Embed a Google Map by address with zoom, map type, caption, border, and shadow controls.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Embed a Google Map by address with zoom, map type, caption, border, and shadow controls.
Inspector panels on this block: Map Settings, Dimensions, Border & Shadow, Caption. Those titles come from index.js, not from a shared template.
Behavior controls: “Address or Place Name” (Any address, city, landmark, or coordinates); “Zoom Level” (1 = world, 14 = street, 20 = building); “Map Type” options: Roadmap (default), Satellite, Hybrid (satellite + labels), Terrain; “Lazy-load iframe” (Defers loading until the map is near the viewport).
Google Map has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Business → search “Google Map” (block name `blockenberg/google-map` in block.json). Style it in the sidebar after insert.
How to use Google Map block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Google Map”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Map Settings. Set “Address or Place Name”, “Zoom Level”, “Map Type”, “Allow fullscreen”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Address or Place Name | Text field in the inspector. Any address, city, landmark, or coordinates. block.json default: New York, NY, USA. Saved as `address`. |
| Zoom Level | Numeric range control in the inspector. 1 = world, 14 = street, 20 = building. Range 1–21. block.json default: 14. Saved as `zoom`. |
| Map Type | Select control; the chosen value is saved on the block. Options: Roadmap (default); Satellite; Hybrid (satellite + labels); Terrain. block.json default: roadmap. Saved as `mapType`. |
| Allow fullscreen | On/off toggle in the inspector. On by default. Saved as `allowFullscreen`. |
| Lazy-load iframe | On/off toggle in the inspector. Defers loading until the map is near the viewport. On by default. Saved as `lazyLoad`. |
| Google Maps API Key (optional) | Text field in the inspector. Required for satellite/terrain/hybrid types and precise zoom. Leave empty for basic embed. Saved as `apiKey`. |
| Map Height (px) | Numeric range control in the inspector. Range 150–900. block.json default: 450. Saved as `mapHeight`. |
| Max Width (px, 0 = full) | Numeric range control in the inspector. Set a max-width and the map will be centered. Range 0–1600. block.json default: 0. Saved as `maxWidth`. |
| Corner Radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 8. Saved as `borderRadius`. |
| Show Border | On/off toggle in the inspector. Off by default. Saved as `showBorder`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–12. block.json default: 1. Saved as `borderWidth`. |
| Border Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted. block.json default: solid. Saved as `borderStyle`. |
| Show Shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Horizontal (px) | Numeric range control in the inspector. Range -60–60. block.json default: 0. Saved as `shadowH`. |
| Vertical (px) | Numeric range control in the inspector. Range -60–60. block.json default: 8. Saved as `shadowV`. |
| Blur (px) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `shadowBlur`. |
| Spread (px) | Numeric range control in the inspector. Range -20–40. block.json default: 0. Saved as `shadowSpread`. |
| Show Caption | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Typography — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `captionAlign`. |
| Spacing Above (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `captionSpacing`. |
When this is the right block
- Embed a Google Map by address with zoom, map type, caption, border, and shadow controls — that is the job of Google Map, not a generic content block.
- Use it when you need the editor control labeled “Address or Place Name”, which exists on this block’s inspector.
- It matches pages about map, google, location.
- Inserter grouping: company, service, and operations pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Google Map block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Google Map”. It sits under Business. After insert, open Map Settings and set “Address or Place Name”, “Zoom Level”, “Map Type”, “Allow fullscreen”.
What makes Google Map different from other Blockenberg blocks?
Embed a Google Map by address with zoom, map type, caption, border, and shadow controls. Inspector labels on this block include “Address or Place Name”, “Zoom Level”, “Map Type”, “Allow fullscreen”.
Is the Google Map Gutenberg block free?
Yes. Google Map ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Google Map to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Map Settings, Dimensions, Border & Shadow, Caption).
Related business blocks
Address Card
Business address card with contact details, opening hours, and optional map link.
Contact Section
All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout.
Contact Info
Display business contact information with icons, labels, and optional Schema.org markup.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
App Screenshot
SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages.
Author Box
Display a blog author profile card with avatar, name, bio, role and social media links.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Google Map from the Gutenberg inserter.