如何使用API​​密钥将Google地图添加到网页

如何建立Google商家資訊，在Google地圖標記您的公司或店名！ (六月 2025)

如何建立Google商家資訊，在Google地圖標記您的公司或店名！ (六月 2025)
Anonim
05年1月1日

获取您网站的Google Maps API密钥

向您的网站添加Google地图的最佳方式是使用Google Maps API。 Google建议您获取API密钥以使用地图。

您无需获得使用Google Maps API v3的API密钥，但它非常有用，因为它可以让您监控使用情况并支付额外的访问权限。 Google Maps API v3的每个用户每秒有1个请求，每天最多25,000个请求。如果您的网页超出了这些限制，则需要启用结算功能才能获得更多优惠。

如何获取Google Maps API密钥

  1. 使用您的Google帐户登录Google。
  2. 转到开发人员控制台
  3. 滚动列表并找到Google Maps API v3，然后点击“关闭”按钮将其打开。
  4. 阅读并同意这些条款。
  5. 转到API控制台，从左侧菜单中选择“API Access”
  6. 在“Simple API Access”部分中，单击“Create new Server key …”按钮。
  7. 输入Web服务器的IP地址。这是您的地图请求来自的IP。如果您不知道自己的IP地址，可以查阅。
  8. 复制“API密钥：”行（不包括该标题）上的文本。这是您的地图的API密钥。
05年02月02日

将您的地址转换为坐标

要在您的网页上使用Google地图，您需要拥有该位置的纬度和经度。您可以通过GPS获取这些信息，也可以使用Geocoder.us等在线工具告诉您。

  1. 转到Geocoder.us并在搜索框中输入您的地址。
  2. 复制纬度的第一个数字（前面没有字母）并将其粘贴到文本文件中。您不需要学位（º）指示器。
  3. 复制经度的第一个数字（再次没有前面的字母）并将其粘贴到您的文本文件中。

您的纬度和经度将如下所示：

40.756076-73.990838

Geocoder.us仅适用于美国地址，如果您需要获取其他国家/地区的坐标，则应搜索您所在地区的类似工具。

05年3月

将地图添加到您的网页

首先，将地图脚本添加到

你的文件

打开您的网页并将以下内容添加到 头 你的文件。

将突出显示的部分更改为您在第二步中记下的纬度和经度数字。

其次，将地图元素添加到您的页面

一旦你将所有的脚本元素添加到了 头 在您的文档中，您需要在地图上放置地图。你这样做是通过添加一个 DIV 元素与 ID =“地图画布” 属性。我建议您也使用适合您页面的宽度和高度来设置此div的样式：

最后，上传和测试

最后要做的是上传您的页面并测试您的地图显示。以下是该页面上Google地图的示例。请注意，由于About.com CMS的工作方式，您必须单击链接才能显示地图。这不是您网页上的情况。

如果您的地图没有显示，请尝试使用a初始化它 身体 属性：

的onload = “初始化（）” >

要检查地图是否未加载的其他事项包括：

  • 在JavaScript中查找拼写错误，包括大小写。 JavaScript区分大小写。
  • 确保你有 放大 和 中央 选项集。
  • 确保你的 DIV 元素在页面上具有正确的ID。
  • 确保你的 DIV 元素有一个高度。
05年4月

在地图中添加标记

但是，如果没有标记告诉人们应该去哪里，那么你的位置地图有什么用呢？

要添加标准的Google地图红色标记，请将以下内容添加到您的脚本下方 var map = … 线：

var myLatlng = new google.maps.LatLng（ 纬度，经度 );var marker = new google.maps.Marker（{职位：myLatlng，地图：地图，标题：” 前About.com总部 '});

将突出显示的文本更改为纬度和经度以及人们将鼠标悬停在标记上时要显示的标题。

您可以根据需要为页面添加任意数量的标记，只需添加具有新坐标和标题的新变量，但如果地图太小而无法显示所有标记，则除非阅读器缩小，否则它们将不会显示。

var latlng 2 = new google.maps.LatLng（ 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker（{职位：latlng 2 ,地图：地图，标题：” Apple电脑 '});

以下是带有标记的Google地图示例。请注意，由于About.com CMS的工作方式，您必须单击链接才能显示地图。这不是您网页上的情况。

05年05月05日

向页面添加第二个（或更多）地图

如果您查看了我的示例Google地图页面，您会注意到我在页面上显示了多个地图。这很容易做到。这是如何做。

  1. 获取您在本教程的第2步中学习的所有要显示的地图的纬度和经度。
  2. 插入我们在本教程的第3步中学习的第一张地图。如果您希望地图有标记，请按步骤4添加标记。
  3. 对于第二个地图，您需要在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）;
  4. 如果您还想在新地图上添加标记，请添加指向第二个坐标和第二个地图的第二个标记：var myMarker2 = new google.maps.Marker（{position： latlng2 ，地图： MAP2 ，标题：“ 你的标记标题 ' });
  5. 然后添加第二个地图的第二个地方。一定要给它一个 ID = “map_canvas_2” ID。
  6. 加载页面时，将显示两个地图

以下是包含两个Google地图的网页代码：

编辑推荐