05年1月
为您的网站获取Google Maps API密钥
将Google地图添加到您的网站的最佳方式是使用Google地图API。 Google建议您获取API密钥以使用地图。
您无需获取API密钥即可使用Google Maps API v3，但它非常实用，因为它可让您监控自己的使用情况并支付额外的访问权限。 Google Maps API v3每个用户的每秒请求限额为1个，每天最多请求25,000个请求。 如果您的网页超出了这些限制，则需要启用结算才能获得更多。
如何获取Google Maps API密钥
- 使用您的Google帐户登录Google。
- 转到Developers Console
- 滚动列表并找到Google Maps API v3，然后点击“关闭”按钮将其打开。
- 阅读并同意这些条款。
- 转到API控制台并从左侧菜单中选择“API访问”
- 在“简单API访问”部分，点击“创建新的服务器密钥...”按钮。
- 输入您的网络服务器的IP地址。 这是您的地图请求将来自的IP。 如果你不知道你的IP地址，你可以查看它。
- 复制“API key：”行中的文本（不包括该标题）。 这是您的地图的API密钥。
05年05月
将您的地址转换为坐标
为了在您的网页上使用Google地图，您需要拥有该地点的经纬度。 您可以从GPS获取这些信息，或者您可以使用Geocoder.us等在线工具来告诉您。
- 转到Geocoder.us并在搜索框中输入您的地址。
- 复制纬度的第一个数字（前面没有字母）并将其粘贴到文本文件中。 你不需要度数（º）指标。
- 复制经度的第一个数字（前面没有字母）并将其粘贴到文本文件中。
你的经纬度看起来像这样：
40.756076
-73.990838
Geocoder.us只适用于美国地址，如果您需要获取其他国家/地区的坐标，则应在您所在地区搜索类似的工具。
05年3月
将地图添加到您的网页
首先，将地图脚本添加到
你的文件
打开您的网页并将以下内容添加到文档的HEAD中。
将突出显示的部分更改为您在步骤2中记下的纬度和经度编号。
其次，将地图元素添加到您的页面
将所有脚本元素添加到文档的HEAD后，您需要将地图放在页面上。 你可以通过添加一个id =“map-canvas”属性的DIV元素来实现。 我建议你也可以用适合你页面的宽度和高度来设计这个div：
最后，上传和测试
最后要做的是上传你的页面并测试你的地图显示。 以下是网页上的Google地图示例。 请注意，由于About.com CMS的工作方式，您必须点击链接才能显示地图。 这不是你的页面上的情况。
如果您的地图不显示，请尝试使用BODY属性对其进行初始化：
onload =“initialize（）” >
其他要检查您的地图是否未加载的内容包括：
- 在你的JavaScript中寻找拼写错误，包括案例。 JavaScript区分大小写。
- 确保您已设置缩放和中心选项。
- 确保您的DIV元素位于页面上，且ID正确。
- 确保你的DIV元素有一个高度。
04年05月
为您的地图添加标记
但是如果没有标记告诉人们他们应该去哪里，那么你的位置地图有什么好处呢？
要添加标准的Google Maps红色标记，请在var map = ...行下方的脚本中添加以下内容：
var myLatlng = new google.maps.LatLng（ latitude，longitude ）;
var marker = new google.maps.Marker（{
位置：myLatlng，
地图：地图，
标题：“ 前总部总部 ”
}）;
将突出显示的文本更改为您的经纬度，以及将用户悬停在标记上时显示的标题。
您可以根据需要在页面中添加尽可能多的标记，只需添加新的坐标和标题新变量，但如果地图太小而无法显示所有标记，则除非读者缩小，否则不会显示。
var latlng 2 = new google.maps.LatLng（ 37.3316591，-122.0301778 ）;
var myMarker 2 = new google.maps.Marker（{
位置：latlng 2 ，
地图：地图，
标题：“ 苹果电脑 ”
}）;
以下是带有标记的Google地图示例。 请注意，由于About.com CMS的工作方式，您必须点击链接才能显示地图。 这不是你的页面上的情况。
05年05月
添加第二个（或更多）地图到您的页面
如果你看过我的示例谷歌地图页面，你会注意到我有多个地图显示在页面上。 这很容易做到。 就是这样。
- 获取您想显示的所有地图的经纬度，正如我们在本教程的第2步中所了解的。
- 插入我们在本教程的第3步中学到的第一张地图。 如果您想让地图有标记，请按照步骤4添加标记。
- 对于第二张地图，您需要为initialize（）脚本添加3个新行：
var latlng2 = new google.maps.LatLng（ 第二个坐标 ）;
var myOptions2 = {zoom：18，center：latlng2，mapTypeId：google.maps.MapTypeId.ROADMAP};
var map2 = new google.maps.Map（document.getElementById（“map_canvas_2”），myOptions2）; - 如果您还想在新地图上添加标记，请添加指向第二个坐标和第二个地图的第二个标记：
var myMarker2 = new google.maps.Marker（{position： latlng2 ，map： map2 ，title：“ Your Marker Title ”}）; - 然后添加第二个
你想要第二张地图的地方。 并且一定要给它一个id =“map_canvas_2”ID。
- 当你的页面加载时，将显示两个地图
这是一个包含两个Google地图的页面的代码：