如何在网页中插入google地图,google地图怎样嵌入到网站里面

wordpress谷歌地图指南:嵌入或不插入插件
正在寻找一种在您的网站上嵌入wordpress谷歌地图内容的方法?
与wordpress中的许多内容一样,您可以通过几种不同的方式在您的网站上嵌入google地图,具体取决于您要包含的地图内容类型。
在这篇文章中,我们将首先向您展示如何在没有插件的情况下在wordpress中添加google地图。然后,我们会推荐一些可以帮助您嵌入google地图的插件,以及采用这种方法的一些好处。我们还将深入探讨如何正确使用现在需要的google maps api。
现在需要google maps api截至2018年6月11日,google地图现在需要api密钥。如果您已经在自己的网站上实施了google地图并且它已不再有效,那可能就是原因。或者更确切地说,您错过了api密钥。好消息是,对于99%的人来说,它应该仍然是免费的。以下是google maps api定价。
google maps api定价
google还会每月为您的结算帐户提供200美元的经常性信用额度,以抵消您的使用费用。因此,除非您生成数千个请求,否则您在网站上使用google地图不应该花费任何费用。
还有什么变化?没什么,但如果您想在wordpress中使用google地图,现在需要执行以下操作:
注册google cloud platform console帐户并进行配置。添加您的结算信息,即使您可能不会被结算。将api密钥添加到您的google maps嵌入代码或插件设置中。如何获取google maps api密钥以下是有关如何获取google maps api密钥的步骤。
步骤1转到google云端平台控制台。如果您还没有帐户,请创建一个帐户,它是免费的。
第2步选择或创建项目。
第3步设置结算帐户。即使他们要求您将信用卡存档,也不应该向您收费,除非您确实超过了高使用限制。
第4步您将被要求选择一种或多种产品。这取决于您正在使用的地图类型。例如,如果您在没有插件的情况下在wordpress网站上嵌入地图(如下面的步骤所示),那么您将选择google maps embed api。
google maps embed api
如果您使用的是google maps widget等插件(如下面的步骤所示),那么您可以选择google maps static api。
如果您使用的是第三方插件或主题,则应提供有关他们使用的google地图部署类型的文档。不用担心,您可以随时添加多种类型并在以后更改这些类型。
第5步点击“启用”。
启用google maps api
第6步单击“api”,然后在“凭据”下,您将看到您的api密钥。
google maps api密钥
第7步如果您只是嵌入google maps api密钥,它将在源代码中以纯文本格式显示。因此,您应该对此进行限制,否则,人们可以在他们的wordpress站点或项目上使用您的api密钥并占用您的使用量。
要执行此操作,只需单击您的api密钥的名称,它将允许您添加限制。对于您的wordpress网站,只需添加http引荐来源即可。如https://yourdomain.com/*。这将允许它只在您的网站上拨打电话。
google maps api密钥限制
如何在没有插件的情况下在wordpress中添加谷歌地图如果您只想嵌入一个简单的地图而不需要更详细的功能,例如自定义位置标记或其他注释,则可以使用您每天使用的普通google地图网站在没有插件的情况下嵌入google地图。
这是它的工作原理……
第1步:复制google地图嵌入代码要开始使用,请使用google地图网站创建要嵌入的地图。
例如,如果要嵌入地点标记,请在google地图中打开该地点。或者,如果要嵌入路线,请在google地图中打开路线。
获得要嵌入的地图后,单击左上角的汉堡菜单:
如何访问嵌入代码
在菜单项列表中,选择“?共享”或“嵌入地图?”选项:
打开嵌入选项
这将打开一个共享弹出窗口。在该弹出窗口中,单击“?嵌入地图”选项卡。
然后,您可以使用下拉菜单选择所需的尺寸。对于大多数wordpress网站,默认大小效果很好,但如果需要,您可以使地图变大或变小。
完成后,单击“?复制html”按钮复制嵌入代码:
google地图嵌入了代码
然后,您需要将api密钥添加到代码中。所以你的代码应该是这样的:
<iframe src =“https://www.google.com/maps/embed/v1/search?key= your_api_key&parameters allowfullscreen> </ iframe>第2步:将google地图嵌入代码添加到wordpress网站现在,您需要做的就是将嵌入代码添加到要包含地图的帖子或页面中的wordpress网站。
如果您正在使用随wordpress 5.0发布的新wordpress gutenberg块编辑器,您可以通过添加自定义html块并将嵌入代码粘贴到块中来实现。不要忘记添加api密钥。
如何在wordpress块编辑器中添加嵌入代码
您可以通过单击块上方的“?预览”按钮来预览地图的外观。
如果您仍在使用经典的tinymce编辑器,则可以通过打开“?文本”选项卡并粘贴代码来添加google maps嵌入代码:
如何在wordpress classic编辑器中添加嵌入代码
添加代码后,您可以返回“?可视”选项卡查看地图的实时预览。
就是这样!您刚学会了如何在没有插件的情况下在wordpress中添加google地图。
使用google我的地图在没有插件的情况下嵌入更复杂的地图如果您希望在多个位置标记,自定义注释等内容方面获得更多创意,您仍然可以在不需要使用google的“我的地图”服务的插件的情况下实现这一目标。
我的地图是google的官方工具,可让您创建和共享自己的自定义地图。有了它,您可以创建类似下面的示例,其中包含许多自定义标记和用户单击标记时显示的自定义信息:
google我的地图示例
以下是如何使用它将自定义google地图添加到wordpress。
第1步:在google我的地图中创建地图要开始使用,请访问google我的地图并创建新地图。从那里,您可以使用地图构建器界面来构建地图:
google我的地图界面
虽然我们不会详细介绍它,但是这个界面可以让你构建一些非常有创意的地图。为了更深入地了解,google的这篇帮助文章涵盖了许多重要功能。
第2步:生成嵌入代码完成地图构建后,需要生成嵌入代码。
但是,在获得该代码之前,首先需要公开您的地图。为此,请单击“?共享”按钮。然后,在弹出窗口中单击更改?…:
google我的地图共享设置
然后,在web上选择on?–?public并单击save:
打开链接共享
完成后,点击地图标题旁边的下拉菜单,然后选择在我的网站上嵌入以生成实际的嵌入代码:
访问“我的地图”嵌入代码
这将打开一个带有代码的弹出窗口,您应该复制它。不要忘记添加api密钥。
我的地图嵌入了代码
第3步:将嵌入代码添加到wordpress站点现在,您可以将嵌入代码添加到wordpress网站,就像您从常规google地图网站获得的嵌入代码一样。
如果您不确定如何操作,请单击此处跳转到上面教程的该部分。
请改用wordpress谷歌地图插件除了上面的手动方法,还有大量的wordpress谷歌地图插件,可以帮助您在您的网站上嵌入地图。
您可能需要考虑其中一个插件而不是手动方法,这有几个原因:
它们允许您使用简单的界面创建更复杂的地图。无需离开wordpress仪表板即可完成所有操作。其中一些链接到wordpress。例如,您可以将地图标记链接到wordpress帖子。其中一些可以帮助您优化google地图的性能(稍后将详细介绍)。对于所有这些插件,您需要先生成自己的google maps api密钥,然后才能开始嵌入地图。本教程将向您展示如何执行此操作。
谷歌地图小工具google maps widget是一个简单的google maps插件,可让您使用google maps static api嵌入地图,该api通过嵌入静态图片而非交互式地图提供更加性能友好的方法(我们将在下一节)。
如果你想要简单轻巧的东西,这是一个很好的选择。激活后,您需要获取google maps api密钥并将其插入插件的设置中。您可以将google地图添加到您网站上的任何小部件区域。然后,访问者可以在灯箱中打开更大的交互式地图版本:
google maps widget界面
如果需要,您还可以立即使用交互式地图,pro版本允许您使用短代码在您网站的任何位置嵌入地图。
google maps easygoogle maps easy可帮助您使用自己的标记和注释创建自定义地图。
添加标记时,您可以上传自己的自定义图标,在标记描述中包含文本和图像等等。您还可以控制地图的功能,
上一个:高端网站建设给众多知名企业提供高品质的建站服务
下一个:网页设计正在走向自己的工业时代的5个迹象
乾安网站建设,乾安做网站,乾安网站设计