通过向嵌入式Google地图添加标志来精确定位您的位置
要将带有位置标记的Google地图插入网页，您需要从Google获取特殊的软件密钥，然后将相关的JavaScript添加到网页中。尽管该过程很简单，但至少有助于了解HTML和JavaScript的背景知识。
厦门网站建设
获取Google Maps API密钥
为了保护其服务器免遭对地图和位置查找请求的攻击，Google限制了对其Maps数据库的访问。您必须以开发者身份向Google注册才能获得唯一密钥，才能使用 应用程序编程接口 从Maps服务器请求数据。API密钥是免费的，除非您需要对Google服务器的繁重访问（例如，开发Web应用程序）。
要注册您的API密钥：
-
转到 Google Cloud Platform Console ，然后使用您的Google帐户登录后，创建一个新项目或选择一个现有项目。
-
单击 继续 以启用API和所有相关服务。
-
在“ 凭据” 页面上，获取 API密钥。必要时，对密钥设置相关限制。
-
使用 Google建议的最佳做法来保护您的API密钥 。
如果您认为需要显示地图的次数超出免费配额所允许的时间，请与Google设置结算安排。大多数网站（尤其是低流量博客或利基网站）不太可能消耗大量配额分配。
将JavaScript插入您的网页
将以下代码插入HTML文档的BODY部分的Web页面中：
<div id =“ map”> </ div> <script> //初始化并添加地图 函数initMap（）{ //标志的位置 var flag = {lat：XXX，lng：YYY}; //以标记 var map = new google.maps.Map（ document.getElementById（'map'），{zoom：4，center：flag}）为中心的地图； //标记，位于标记 var marker = new google.maps.Marker（{position：flag，map：map}）;处； } </ script> <script异步延迟 src =“ https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”> </ script>
在此代码中，更改以下内容：
- 将标记 替换 为引用您要固定的位置的名称。使其简洁明了（例如 居家 ， 办公室 ， 巴黎 或 底特律）。您可以 按原样运行此代码，但保留其 标志，但是更改名称支持在同一页面上重复使用此代码，以嵌入多个不同的地图。
- 将XXX 和 YYY 替换 为地图标记位置的纬度和经度（以十进制表示）。您必须替换这些值，地图才能正确显示。查找经纬度的一种简单方法是打开Google地图，然后右键单击要标记的确切位置。在上下文菜单中，选择 “这里是什么？”。 查看经度和纬度。
- 将YOUR_API_KEY替换 为您从Google获得的API密钥。不要在等号和与号之间放置空格。没有该键，查询将失败，并且地图将无法正确显示。
最佳实践
在HTML文档的开头， 为地图指定 CSS约束，包括大小，颜色和页面放置。
Google的地图脚本包含 可用于最终用户修改的诸如zoom 和 center之类的属性 。Google的开发人员文档支持此更高级的技术。
Google Maps API是宝贵的资产。Google的最佳做法说明为防止他人滥用密钥提供了很好的建议。如果您已经设置了用于API访问的支付系统，则正确的安全性尤其重要，因为如果您的凭据被盗，您可能会面临巨额账单。特别是，我们在此处显示的示例 确实 将API密钥直接嵌入了代码中-我们这样做是为了演示该过程。但是，在生产环境中，最好为密钥指定环境变量，而不是直接插入密钥。
