Title: Gutenberg Block For Google Maps Embed By Pantheon
Author: Andrew Taylor
Published: <strong>January 19, 2018</strong>
Last modified: April 22, 2019

---

Search plugins

![](https://ps.w.org/embed-gutenberg-block-google-maps/assets/banner-772x250.png?
rev=1808169)

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://ps.w.org/embed-gutenberg-block-google-maps/assets/icon-256x256.png?rev
=1808169)

# Gutenberg Block For Google Maps Embed By Pantheon

 By [Andrew Taylor](https://profiles.wordpress.org/andrewtaylor-1/)

[Download](https://downloads.wordpress.org/plugin/embed-gutenberg-block-google-maps.1.5.3.zip)

 * [Details](https://test.wordpress.org/plugins/embed-gutenberg-block-google-maps/#description)
 * [Reviews](https://test.wordpress.org/plugins/embed-gutenberg-block-google-maps/#reviews)
 *  [Installation](https://test.wordpress.org/plugins/embed-gutenberg-block-google-maps/#installation)
 * [Development](https://test.wordpress.org/plugins/embed-gutenberg-block-google-maps/#developers)

 [Support](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/)

## Description

This plugin **requires** WordPress `5.0` or greater.

### API Key

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:
 1. Create a new project in the Google 
Developer’s console by clicking [here](https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend,maps_embed_backend&keyType=CLIENT_SIDE&reusekey=true)
and selecting _Create new project_ 1. Name your project 1. Select _HTTP referrers(
web sites)_ for the _Key restriction_ type 1. Enter the domains where your API key
will be used – Example: `*.mysite.com` 1. Click the _Create_ button 1. Write your
API key down in a safe place 1. Enter the API key into the plugin settings 1. 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](https://developers.google.com/maps/documentation/embed/get-api-key#key-restrictions)
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.

### Use

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.

## Screenshots

 * [[
 * Animated `GIF` showing a demo of the plugin

## Installation

This plugin can be installed just like you would install any other WordPress plugin.
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.

 1.  Install and activate the Gutenberg plugin if you are on a WordPress version <=`
     5.0`
 2.  Upload the plugin to the `/wp-content/plugins/` directory
 3.  Activate the plugin through the ‘Plugins’ menu in WordPress
 4.  Obtain a Google Map embed API key (instructions below)
 5.  Visit the plugin settings page and enter/save your Google Map embed API key
 6.  Clear full page cache if enabled for your site so the API key can be read from
     the plugin settings via the REST API
 7.  Search for _Google Map_ when adding a new content block
 8.  Enter a location for the map. This can be an exact address for a queryable location,
     such as _New York, NY_
 9.  Optionally edit the advanced block settings

## Reviews

![](https://secure.gravatar.com/avatar/08b31b0196905c781df1efb2c8c68994d01c1733e390b014d5b053445129cbd3?
s=60&d=retro&r=g)

### 󠀁[Pretty good and easy](https://wordpress.org/support/topic/pretty-good-and-easy/)󠁿

 [Miro J](https://profiles.wordpress.org/miro-j/) March 20, 2019 1 reply

Easy to install and configure. Totally recommended!

![](https://secure.gravatar.com/avatar/5a240aaf1069fd211f4f759ee93743ecdb758d34538e2f589cc0793d2253c8f5?
s=60&d=retro&r=g)

### 󠀁[It works!](https://wordpress.org/support/topic/it-works-1474/)󠁿

 [2players](https://profiles.wordpress.org/2players/) September 4, 2018 1 reply

Awesome. It worked at once and it’s really easy to customize. Excellent work!

 [ Read all 2 reviews ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/)

## Contributors & Developers

“Gutenberg Block For Google Maps Embed By Pantheon” is open source software. The
following people have contributed to this plugin.

Contributors

 *   [ Andrew Taylor ](https://profiles.wordpress.org/andrewtaylor-1/)

“Gutenberg Block For Google Maps Embed By Pantheon” has been translated into 2 locales.
Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps/contributors)
for their contributions.

[Translate “Gutenberg Block For Google Maps Embed By Pantheon” into your language.](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/embed-gutenberg-block-google-maps/),
check out the [SVN repository](https://plugins.svn.wordpress.org/embed-gutenberg-block-google-maps/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/embed-gutenberg-block-google-maps/)
by [RSS](https://plugins.trac.wordpress.org/log/embed-gutenberg-block-google-maps/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.5.3

Remove the server-side check for a valid Google Maps URL as it was failing and preventing
the map from rendering in some environments. If an invalid Google Maps API key is
provided, an error message from Google Maps will be rendered on the page.

#### 1.5.2

Use the [WordPress HTTP API](https://developer.wordpress.org/plugins/http-api/) 
instead of `curl` to check the response code of the map URL. Additionally, cache
the map URL response code in a transient to avoid making a request on each page 
load.

Hide the API key input section in the map block settings when the Google Map API
key is defined with the `GOOGLE_MAPS_API_KEY` constant. Additionally, add the `api-
key-input-container` class to the `div` surrounding the API key input field in the
map block settings for easier styling.

#### 1.5.1

Aspect ratio bug fixes to address [this WordPress.org issue](https://circleci.com/docs/api/#trigger-a-new-job).

 * Fix the `1:1` aspect ratio incorrectly displaying as `2:1`
 * Move `16:9` ahead of `4:3` in the aspect ratio selection list so that the aspect
   ratios are in order of width

#### 1.5.0

Allow non-admins to use the map block

The settings API endpoint requires the `manage_options` capability. This is problematic
because only administrators have that permission by default so any users with a 
lesser role cannot use the map block.

The saved API key and a boolean of whether the current user has the `manage_options`
capability are now passed to the block editor JS. Those values are used to determine
if an API key is present. If it is not only users who have the `manage_options` 
capability are shown an option to update the API key. Users without that capability
are directed to ask an administrator to save the API key.

Once an API key is saved the block works as expected for users without the `manage_options`
capability as the API key is no longer fetched from the REST API for those users.

#### 1.3.5

Remove wp-blocks dependency from block CSS registration

#### 1.3.4

Enqueue block JavaScript in the footer

#### 1.3.3

Add filter `render_pantheon_google_map_block`

#### 1.3.2

Use `InspectorControls` in `wp.editor` rather than `wp.blocks` as it will be deprecated
in Gutenberg `3.1`

#### 1.3.1

Fix a bug retrieving API key from the database causing the map to not display on
the frontend

#### 1.3

 * Upgrade to webpack 4

#### 1.2

 * Use [`create-guten-block`](https://github.com/ahmadawais/create-guten-block) 
   for building assets.
    - Prior build process has dependencies that used a version of `hoek` [which had a vulnerability](https://nvd.nist.gov/vuln/detail/CVE-2018-3728)

#### 1.1.2

 * Enqueue block scripts/styles automatically using `register_block_type`
 * Change `focus` to `isSelected`
 * Disallow HTML editing of block source

#### 1.1.1

 * Import controls from `wp.components` instead of `wp.blocks.InspectorControls`
 * Bump tested up to from `4.9.2` to `4.9.5`

#### 1.1.0

 * 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

#### 1.0.0

 * Initial release

## Meta

 *  Version **1.5.3**
 *  Last updated **7 years ago**
 *  Active installations **100+**
 *  WordPress version ** 5.0 or higher **
 *  Tested up to **5.1.22**
 *  PHP version ** 5.6 or higher **
 *  Languages
 * [English (US)](https://wordpress.org/plugins/embed-gutenberg-block-google-maps/),
   [Spanish (Chile)](https://cl.wordpress.org/plugins/embed-gutenberg-block-google-maps/),
   and [Spanish (Spain)](https://es.wordpress.org/plugins/embed-gutenberg-block-google-maps/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps)
 * Tags
 * [block](https://test.wordpress.org/plugins/tags/block/)[embed](https://test.wordpress.org/plugins/tags/embed/)
   [google](https://test.wordpress.org/plugins/tags/google/)[gutenberg](https://test.wordpress.org/plugins/tags/gutenberg/)
   [map](https://test.wordpress.org/plugins/tags/map/)
 *  [Advanced View](https://test.wordpress.org/plugins/embed-gutenberg-block-google-maps/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  2 5-star reviews     ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/)

## Contributors

 *   [ Andrew Taylor ](https://profiles.wordpress.org/andrewtaylor-1/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/)