知道什么

• 转到Google云平台控制台，创建或选择一个项目，然后单击继续。在凭证页面上，获取API密钥。
• 在HTML文档的正文部分插入JavaScript代码（如下所示）。
• 在HTML文档的头部，指定地图的CSS约束，包括大小、颜色和页面位置。

本文介绍了如何在网页中插入带有位置标记的谷歌地图。这个过程包括从Google获得一个特殊的软件密钥，然后向页面添加相关的JavaScript。

获取谷歌地图api密钥

为了保护其服务器免受地图和位置查询请求的轰炸，谷歌限制了对其地图数据库的访问。您必须以开发者身份向谷歌注册，才能获得唯一密钥，使用应用程序编程接口从地图服务器请求数据。API密钥是免费的，除非您需要大量访问谷歌服务器（例如，开发web应用程序）。

要注册API密钥，请执行以下操作：

1. 转到Google云平台控制台，在使用您的Google帐户登录后，创建一个新项目或选择一个现有项目。
2. 单击“继续”以启用API和任何相关服务。
3. 在凭证页面上，获取API密钥。必要时，对钥匙设置相关限制。
4. 使用谷歌推荐的最佳实践保护API密钥。

如果你认为你需要比你的免费配额更频繁地显示地图，那么与谷歌建立一个账单安排。大多数网站，尤其是低流量博客或利基网站，不太可能消耗大部分配额分配。

将javascript插入到您的网页中

在HTML文档的正文部分，将以下代码插入网页：

//初始化并添加映射函数initMap（）{//flag var flag的位置={lat:XXX，lng:YYY}；//地图，以flag var map=new google.maps.map（document.getElementById（'map'），{zoom:4，center:flag}为中心；//位于flag var marker=new google.maps.marker（{position:flag，map:map}）；}src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&回调=初始化映射“&gt；

在此代码中，更改以下内容：

• 用引用要固定的位置的名称替换标志。保持简洁（如家庭、办公室、巴黎或底特律）。您可以按原样运行此代码，但更改名称支持在同一页面上重复使用此代码，以嵌入多个不同的映射。
• 将XXX和YYY替换为地图标记位置的纬度和经度（小数）。必须替换这些值，地图才能正确显示。找到经纬度的一个简单方法是打开谷歌地图，右键单击要标记的精确位置。在关联菜单中，选择What's here？以查看纬度和经度。
• 用从Google获得的API密钥替换您的API密钥。不要在等号和与之间加空格。如果没有该键，查询将失败，地图将无法正确显示。

最佳做法

在HTML文档的头部，指定地图的CSS约束，包括大小、颜色和页面位置。

谷歌的地图脚本包含zoom和center等属性，可供最终用户修改。谷歌的开发者文档支持这种更先进的技术。

谷歌地图API是一项宝贵的资产。谷歌的最佳实践说明为保护密钥以防他人滥用提供了极好的建议。如果您已经为API访问设置了支付系统，那么适当的安全性尤其重要，因为如果您的凭证被盗，您可能会面临巨额账单。特别是，我们在这里展示的示例确实将API密钥直接嵌入到我们为了演示过程而进行的代码中。但是，在生产环境中，最好为密钥指定环境变量，而不是直接插入密钥。