This WordPress plugin provides a Google Maps embed block for the Gutenberg WordPress editor.
This plugin requires WordPress 5.0
or greater.
The Map Embed Gutenberg Block for Google Maps By Pantheon plugin can be installed just like you would install any other WordPress plugin. To install from GitHub simply download the .zip
file. You can then either unzip it and add it to your plugins folder or upload the .zip
file when adding a new plugin in the WordPress dashboard.
Because Google Map embes require an API key you'll need to provide a valid API key in plugin settings as well. See the detailed steps below.
- Search for 'embed-gutenberg-block-google-maps' when adding a new plugin in the WordPress dashboard or upload the plugin files manually to the
/wp-content/plugins/
directory - Activate the plugin through the 'Plugins' menu in WordPress
- Obtain a Google Map embed API key (instructions below)
- Visit the plugin settings page and enter/save your Google Map embed API key
- Clear full page cache if enabled for your site so the API key can be read from the plugin settings via the REST API
- Search for Google Map when adding a new content block
- Enter a location for the map. This can be an exact address for a queryable location, such as New York, NY
- Optionally edit the advanced block settings
This plugin requires an API key to interact with Google Maps. Without an API key maps will not be displayed.
To obtain an API key follow these steps:
- Create a new project in the Google Developer's console by clicking here and selecting Create new project
- Name your project
- Select HTTP referrers (web sites) for the Key restriction type
- Enter the domains where your API key will be used
- Example:
*.mysite.com
- Example:
- Click the Create button
- Write your API key down in a safe place
- Enter the API key into the plugin settings
- Clear full page caching, if necessary
Note: The API key will be exposed publicly to generate the map. It is important to restrict your API key so others do not abuse it. The API key will be used, and displayed, in both the WordPress editor and the front end of the site.
Once you have saved an API key into the plugin settings simply enter a location, such as New York, NY, or a full address. You may also choose the map width, height, zoom level and toggle between an interactive map or a static image in the block settings, which are visible in the right-hand sidebar when the block is selected.
If you want to e.g. wrap the output in your markup, you can do that with render_pantheon_google_map_block
filter in your functions.php
file:
add_filter('render_pantheon_google_map_block', function($content, $attributes) {
return '<div class="row"><div class="column">' . $content . '</div></div>';
});
Remove wp-blocks
dependency from block CSS registration
Enqueue block JavaScript in the footer
- Add filter
render_pantheon_google_map_block
- Use
InspectorControls
inwp.editor
rather thanwp.blocks
as it will be deprecated in Gutenberg3.1
- Test with WordPress
4.9.6
- Test with Gutenberg
3.0.1
- Fix a bug retrieving API key from the database causing the map to not display on the frontend
- Upgrade to webpack 4
- Use
create-guten-block
for building assets.- Prior build process has dependencies that used a version of
hoek
which had a vulnerability
- Prior build process has dependencies that used a version of
- Enqueue block scripts/styles automatically using
register_block_type
- Change
focus
toisSelected
- Disallow HTML editing of block source
- Import controls from
wp.components
instead ofwp.blocks.InspectorControls
- Bump tested up to from
4.9.2
to4.9.5
- Dynamic block
- API Key entered directly in the block
- Removes plugin settings page
- API key setting synced in global state between all blocks.
- Updated README with new API instructions
- Includes Google Developer flow link for API key
- Use WordPress core settings REST API endpoint instead of a custom endpoint
- Initial release