如何使用API​​将Google Map添加到网页上

要将带有位置标记的Google地图插入网页，您需要从Google获取特殊的软件密钥，然后将相关的JavaScript添加到网页中。尽管该过程很简单，但至少有助于了解HTML和JavaScript的背景知识。

为了保护其服务器免遭对地图和位置查找请求的攻击，Google限制了对其Maps数据库的访问。您必须以开发者身份向Google注册才能获得唯一密钥，才能使用  应用程序编程接口  从Maps服务器请求数据。API密钥是免费的，除非您需要对Google服务器的繁重访问（例如，开发Web应用程序）。

要注册您的API密钥：

如果您认为需要显示地图的次数超出免费配额所允许的时间，请与Google设置结算安排。大多数网站（尤其是低流量博客或利基网站）不太可能消耗大量配额分配。

将以下代码插入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 替换  为地图标记位置的纬度和经度（以十进制表示）。您必须替换这些值，地图才能正确显示。查找经纬度的一种简单方法是打开Goog​​le地图，然后右键单击要标记的确切位置。在上下文菜单中，选择  “这里是什么？”。 查看经度和纬度。 
• 将YOUR_API_KEY替换   为您从Google获得的API密钥。不要在等号和与号之间放置空格。没有该键，查询将失败，并且地图将无法正确显示。

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

Google的地图脚本包含 可用于最终用户修改的诸如zoom  和  center之类的属性  。Google的开发人员文档支持此更高级的技术。

Google Maps API是宝贵的资产。Google的最佳做法说明为防止他人滥用密钥提供了很好的建议。如果您已经设置了用于API访问的支付系统，则正确的安全性尤其重要，因为如果您的凭据被盗，您可能会面临巨额账单。特别是，我们在此处显示的示例  确实  将API密钥直接嵌入了代码中-我们这样做是为了演示该过程。但是，在生产环境中，最好为密钥指定环境变量，而不是直接插入密钥。