一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

为网站添加带标记的地图

简介

本教程介绍如何向网页添加带标记的简单 Google 地图。 其适用对象是掌握了 HTML 和 CSS 的初级或中级知识并对 JavaScript 略有了解的人士。

如需查看地图创建高级指南,请阅读开发者指南

下面便是您将在本教程的指导下创建的地图。

下文显示了创建本教程中的地图所需的完整代码。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

自己试一试

悬停在代码块右上角以复制代码或在 JSFiddle 中打开。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

入门指南

在网页上创建带标记的 Google 地图需要执行以下三个步骤:

  1. 创建 HTML 页面
  2. 添加带标记的地图
  3. 获取 API 密钥

您需要一个网络浏览器。 请根据所用平台选择一个著名浏览器,比如 Google Chrome(推荐)、Firefox、Safari 或 Internet Explorer。

第 1 步:创建 HTML 页面

下面是一个初级 HTML 网页的代码:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

请注意,这是一个非常初级的页面,包含一个三级标题 (h3)、单个 div 元素和一个 style 元素,下表对这些内容都做了说明。

您可以随意向网页添加任何内容。

亲自尝试一下

在上面示例代码的右上角有两个按钮。 点击最左侧的按钮可在 JSFiddle 中打开示例。

理解代码

下表对上面代码的每个部分都做了说明。

代码和说明
<html>
 <head>
 </head>
 <body>
 </body>
</html>

创建一个包括标题和正文的 HTML 页面。
<h3>My Google Maps Demo</h3>

在地图上方添加一个三级标题。
<div id="map"></div>

为 Google 地图定义一个页面区域。
在教程的这一阶段,div 只是以灰块形式显示,因为您尚未添加地图。 它显示为灰色是您应用了 CSS 的缘故。 见下文。
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

head 中的 style 元素设置地图的 div 尺寸。


div 宽度和高度设置为大于 0px 的值,才能让地图显示出来。


在本例中,div 设置为高 500 像素、宽 100%,可按网页的完整宽度显示地图。

div 应用 background-color: grey 可查看网页上显示地图的区域。

第 2 步:添加带标记的地图

此部分介绍如何将 Google Maps JavaScript API 加载到网页中,以及如何自行编写利用 API 添加带标记地图的 JavaScript。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

亲自尝试一下

在上面示例代码的右上角有两个按钮。 点击最左侧的按钮可在 JSFiddle 中打开示例。

理解代码

请注意,上面的示例代码不再包含将 div 设置为灰色的 CSS。 这是因为此时 div 已包含地图。

下表对上面代码的每个部分都做了说明。

代码和说明
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

script 从指定网址加载 API。
callback 参数在 API 加载完毕后执行 initMap 函数。
async 属性允许浏览器在 API 加载的同时继续渲染页面的其余内容。
key 参数包含 API 密钥。 在 JSFiddle 中试验本教程的代码时不需要使用自己的 API 密钥。 请参阅第 3 步:获取 API 密钥, 查看有关稍后如何自行获取 API 密钥的说明。
<script>
  function initMap() {
  }
</script>

initMap 函数在网页加载时初始化并添加地图。 使用 script 标记可加入自己的包含 initMap 函数的 JavaScript。
getElementById

添加此函数可查找网页上的地图 div
new google.maps.Map()

添加这个新的 Google 地图对象可在 div 元素中构建地图。
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

向地图添加包括中心和缩放比例在内的属性。 请参阅文档中有关其他属性选项的说明。
center 属性指示 API 将地图的中心定在何处。 地图坐标按以下顺序设置:纬度经度
zoom 属性指定地图的缩放比例。 Zoom:0 是最低缩放比例,显示整个地球。 将缩放值设置得更高可以更高分辨率放大地球。
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

添加此代码可在地图上放置一个标记。 position 属性设置标记的位置。

第 3 步:获取 API 密钥

此部分说明如何利用自己的 API 密钥向 Google Maps JavaScript API 验证应用的身份。

请按照下列步骤获取 API 密钥:

  1. 转到 Google API Console
  2. 创建或选择一个项目。
  3. 点击 Continue 启用该 API 以及任何相关服务。
  4. Credentials 页面上,获取一个 API 密钥(并设置 API 密钥限制)。

    注:如果已有不受限的 API 密钥或有浏览器限制的密钥,可以使用该密钥。

  5. 为防止配额盗用,请遵循这些最佳做法保护您的 API 密钥

  6. (可选)启用计费。 如需了解详细信息,请参阅使用限制

  7. 将此页面上本教程的完整代码复制到文本编辑器中。 如果您还没有文本编辑器,推荐使用下面这些编辑器: 您可以使用:Notepad++(适用于 Windows);TextEdit(适用于 macOS);gedit、KWrite 等等(适用于 Linux 计算机)。

  8. 将网址中 key 参数的值替换为您自己的 API 密钥(即您刚获得的 API 密钥)。

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. 使用以 .html 结尾的名称保存该文件,例如 google-maps.html

  10. 将这个 HTML 文件从桌面拖放到网络浏览器上进行加载。 在大多数操作系统上,也可双击该文件进行加载。

温馨提示和故障排除

  • 可使用 JSFiddle 界面在不同的窗格中显示 HTML、CSS 和 JavaScript 代码。 可以运行代码并在 Results 窗格中显示输出。

  • 可通过调整样式和属性之类的选项对地图进行自定义。 如需了解有关自定义地图的详细信息,请阅读更多有关 Maps JavaScript API 的内容。

  • 在网络浏览器中使用 Developer Tools Console 测试并运行代码、阅读错误报告并解决代码存在的问题。

    在 Chrome 中打开该控制台的键盘快捷键: Command+Option+J(在 Mac 上),或 Ctrl+Shift+J(在 Windows 上)。

发送以下问题的反馈:

此网页
Google Maps JavaScript API
Google Maps JavaScript API
需要帮助?请访问我们的支持页面