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

---

Ṣàwárí àwọn plugin

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

Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**.
Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu
nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun.

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

# Gutenberg Block For Google Maps Embed By Pantheon

 Láti ọwọ́ [Andrew Taylor](https://profiles.wordpress.org/andrewtaylor-1/)

[Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/embed-gutenberg-block-google-maps.1.5.3.zip)

 * [Àwọn àlàyé](https://yor.wordpress.org/plugins/embed-gutenberg-block-google-maps/#description)
 * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/embed-gutenberg-block-google-maps/#reviews)
 *  [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/embed-gutenberg-block-google-maps/#installation)
 * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/embed-gutenberg-block-google-maps/#developers)

 [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/)

## Àpèjúwe

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Ìtumọ̀ Yorùbá: ’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 Ìtumọ̀ Yorùbá: – 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.

## Àwọn àwòrán ìbòjú

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

## Ìgbéwọlẹ̀

This plugin can be installed just like you would install any other WordPress plugin.
Because Google Map embes require an API key youÌtumọ̀ Yorùbá: ’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

## Àwọn àgbéyẹ̀wò

![](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/) Ẹrẹ́nà 20, 2019 1 ìdáhùn

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/) Ọwẹ́wẹ̀ 4, 2018 1 ìdáhùn

Awesome. It worked at once and itÌtumọ̀ Yorùbá: ’s really easy to customize. Excellent
work!

 [ Ka gbogbo àwọn àgbéyẹ̀wò 2 ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/)

## Àwọn Olùkópa & Olùgbéejáde

“Gutenberg Block For Google Maps Embed By Pantheon” jẹ́ ètò ìṣàmúlò orísun ṣíṣí 
sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí.

Àwọn Olùkópa

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

A ti túmọ̀ “Gutenberg Block For Google Maps Embed By Pantheon” sí àwọn èdè agbègbè
2. Ọpẹ́lọpẹ́ fún [àwọn atúmọ̀ èdè](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps/contributors)
fún àwọn ìkópa wọn.

[Túmọ̀ “Gutenberg Block For Google Maps Embed By Pantheon” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps)

### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?

[Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/embed-gutenberg-block-google-maps/),
ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/embed-gutenberg-block-google-maps/),
tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/embed-gutenberg-block-google-maps/)
nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/embed-gutenberg-block-google-maps/?limit=100&mode=stop_on_copy&format=rss).

## Àkọsílẹ̀ àwọn àyípadà

#### 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

## Àkójọpọ̀ Meta

 *  Ẹ̀yà **1.5.3**
 *  Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 7 sẹ́yìn**
 *  Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **100+**
 *  Ẹ̀yà WordPress ** 5.0 tàbí ju bẹ́ẹ̀ lọ **
 *  Dánwò dé **5.1.22**
 *  Ẹ̀yà PHP ** 5.6 tàbí ju bẹ́ẹ̀ lọ **
 *  Àwọn èdè
 * [English (US)](https://wordpress.org/plugins/embed-gutenberg-block-google-maps/),
   [Spanish (Chile)](https://cl.wordpress.org/plugins/embed-gutenberg-block-google-maps/),
   àti [Spanish (Spain)](https://es.wordpress.org/plugins/embed-gutenberg-block-google-maps/).
 *  [Túmọ̀ sí èdè rẹ](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps)
 * Àwọn àmì
 * [block](https://yor.wordpress.org/plugins/tags/block/)[embed](https://yor.wordpress.org/plugins/tags/embed/)
   [google](https://yor.wordpress.org/plugins/tags/google/)[gutenberg](https://yor.wordpress.org/plugins/tags/gutenberg/)
   [map](https://yor.wordpress.org/plugins/tags/map/)
 *  [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/embed-gutenberg-block-google-maps/advanced/)

## Àwọn ìbò

 5 lára àwọn ìràwọ̀ 5.

 *  [  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/)

## Àwọn Olùkópa

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

## Ìrànlọ́wọ́

Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́?

 [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/)