地图是任何商业网站的重要方面。 即使您完全基于互联网，客户仍然喜欢知道您是谁以及您住在哪里。 Google Maps现在是许多网站的默认设置，因为它最容易使用，看似最准确，也是免费的。 在本教程结束时，您将确切知道如何将响应式Google Map嵌入到您的网站中。
默认的Google地图并非总是响应式的，因此可能无法缩放到不同的屏幕尺寸。 根据您使用的是WordPress插件还是使用代码自己嵌入，可能需要添加几行CSS才能使地图响应。
响应式网页设计
响应式是这里的关键术语。 它描述了一种网页设计，其中考虑了用户体验和设备，以确保无论使用哪种设备访问网站，该体验都相同。 例如，无论您是在台式机，平板电脑还是智能手机上访问，自适应网站都应提供相同的体验质量。
为此，该网站必须适应不同的分辨率，屏幕尺寸并进行触摸。
将自适应Google Map嵌入网站
我知道将Google Maps嵌入网站中的三种方法。 如果您使用WordPress主题，则可能内置了该功能。您还可以使用插件，也可以直接从Google将代码嵌入任何网站。 第一个和第二个选项对WordPress用户非常有用，其他CMS也使用插件，因此您可以在这里找到。 最终的选择是使用代码在大多数网站上都可以使用，无论它们是如何构建的。
使用WordPress主题嵌入可响应的Google Map
某些WordPress主题将具有专门针对Google Maps的功能。 由于地图是现代网站的基础，因此某些主题设计师已将其直接实现到设计中。 如果您的主题具有地图功能，则可能需要Google Maps API才能使其正常工作。 您将API添加到主题选项中，它将在每次访问时直接与Google对话以构建地图。
- 访问Google网站上的此页面以开始API流程。
- 选择蓝色的“入门”按钮。
- 选择新屏幕左上方的三行菜单图标。
- 选择“ API和服务”，然后选择“凭据”。
- 选择创建凭据，然后选择API密钥。
- 选择“限制密钥”，然后选择“ HTTP Referrers”。
- 选择保存。
- 复制API密钥并将其粘贴到需要它的设计选项页面中。
获得API密钥后，您可以使用主题设计工具将Google Map实施到您的网站中。 只要主题是自适应的，地图也应该是自适应的。
使用插件嵌入响应式Google Map
WordPress使用插件，Joomla使用扩展，Drupal使用模块或插件，其他CMS使用类似的命名约定。 无论哪种方式，插件均指的是模块化元素，您可以将其栓接到核心CMS上以添加功能。 一个有用的功能是Google Map。 如果您的网站主题不包含maps元素，并且您不想自己编写代码，那么插件是下一个最好的选择。
- 在WordPress中，导航到Plugins and Add New。
- 搜索Google Maps，然后选择您喜欢的外观的插件。
- 在插件中启用它，然后转到其设置。
- 将您创建的Google Maps API添加到上面指示的位置并保存。
- 在您希望地图出现的任何地方实施插件。
其他CMS的命名和菜单位置略有不同，但原理基本相同。 大多数（如果不是全部）地图插件都需要使用Google Maps API。
使用代码嵌入响应式Google Map
如果您不使用WordPress或其他CMS，仍然可以嵌入自适应Google Map。 您只需要使用代码而不是模块。 这需要更多的工作，但会提供相同的响应式地图。
- 访问Google地图并导航，直到要显示的地图填满屏幕。
- 选择蓝色的“共享”链接，然后从“嵌入地图”中复制代码。
- 将您特定的嵌入代码添加到和之间的以下代码中。
- 在您要查看地图的网页HTML内添加代码。
- 保存您的更改。
编码：
这不是我的代码，我在网上找到了它，但是在我的网站上对其进行了测试。 无论您使用的是CMS，HTML，Hugo还是其他许多网站语言或页面工具之一，它的工作原理都一样。
