Title: Gutenberg Block For Google Maps Embed By Pantheon Author: Andrew Taylor Published: 2018 年 1 月 19 日 Last modified: 2019 年 4 月 22 日 --- 搜索插件 ![](https://ps.w.org/embed-gutenberg-block-google-maps/assets/banner-772x250.png? rev=1808169) **该插件尚未通过WordPress的最新3个主要版本进行测试**。当与较新版本的WordPress一起使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。 ![](https://ps.w.org/embed-gutenberg-block-google-maps/assets/icon-256x256.png?rev =1808169) # Gutenberg Block For Google Maps Embed By Pantheon 作者：[Andrew Taylor](https://profiles.wordpress.org/andrewtaylor-1/) [下载](https://downloads.wordpress.org/plugin/embed-gutenberg-block-google-maps.1.5.3.zip) * [详情](https://cn.wordpress.org/plugins/embed-gutenberg-block-google-maps/#description) * [评价](https://cn.wordpress.org/plugins/embed-gutenberg-block-google-maps/#reviews) * [安装](https://cn.wordpress.org/plugins/embed-gutenberg-block-google-maps/#installation) * [开发进展](https://cn.wordpress.org/plugins/embed-gutenberg-block-google-maps/#developers) [支持](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/) ## 描述 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. ## 屏幕截图 * [[ * Animated `GIF` showing a demo of the plugin ## 安装 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 ## 评价 ![](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/) 2019 年 3 月 20 日 1 回复 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/) 2018 年 9 月 4 日 1 回复 Awesome. It worked at once and it’s really easy to customize. Excellent work! [ 阅读所有2条评价 ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/) ## 贡献者及开发者「Gutenberg Block For Google Maps Embed By Pantheon」是开源软件。以下人员对此插件做出了贡献。贡献者 * [ Andrew Taylor ](https://profiles.wordpress.org/andrewtaylor-1/) 「Gutenberg Block For Google Maps Embed By Pantheon」插件已被翻译至 2 种本地化语言。感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps/contributors) 为本插件所做的贡献。 [帮助将「Gutenberg Block For Google Maps Embed By Pantheon」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/embed-gutenberg-block-google-maps/)，查看[SVN仓库](https://plugins.svn.wordpress.org/embed-gutenberg-block-google-maps/)，或通过[RSS](https://plugins.trac.wordpress.org/log/embed-gutenberg-block-google-maps/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/embed-gutenberg-block-google-maps/)。 ## 更新日志 #### 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 ## 额外信息 * 版本 **1.5.3** * 最后更新：**7 年前** * 活跃安装数量 **100+** * WordPress 版本 ** 5.0 或更高版本 ** * 已测试的最高版本为 **5.1.22** * PHP 版本 ** 5.6 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/embed-gutenberg-block-google-maps/)、 [Spanish (Chile)](https://cl.wordpress.org/plugins/embed-gutenberg-block-google-maps/) 和 [Spanish (Spain)](https://es.wordpress.org/plugins/embed-gutenberg-block-google-maps/). * [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/embed-gutenberg-block-google-maps) * 标签 * [block](https://cn.wordpress.org/plugins/tags/block/)[embed](https://cn.wordpress.org/plugins/tags/embed/) [google](https://cn.wordpress.org/plugins/tags/google/)[gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/) [map](https://cn.wordpress.org/plugins/tags/map/) * [高级视图](https://cn.wordpress.org/plugins/embed-gutenberg-block-google-maps/advanced/) ## 评级 5 星（最高 5 星）。 * [ 2 条 5 星评价 ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/?filter=2) * [ 0 条 1 星评价 ](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) [查看全部评论](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/reviews/) ## 贡献者 * [ Andrew Taylor ](https://profiles.wordpress.org/andrewtaylor-1/) ## 支持有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/embed-gutenberg-block-google-maps/)