在本教程中我们将学习如何使用谷歌地图API V3创建交互式地图。
API = 应用程序编程接口（Application programming interface）。
API（Application Programming Interface，应用编程接口）其实就是操作系统留给应用程序的一个调用接口，应用程序通过调用操作系统的 API 而使操作系统去执行应用程序的命令（动作）。
开始学习本教程前，你需要拥有一个免费的 Google 地图 API key。
开始学习本教程前，你需要在Google上申请一个指定的API key。
通过以下步骤我们可以免费获取 API key 。
访问 https://code.google.com/apis/console/, 使用你的Google账号登陆。
登陆后会出现如下界面：
点击 "Create Project" 按钮。
在服务列表中找到 Google Maps API v3, 然后点击 "off"（关闭） 让其开启该服务器
在下一个步骤中，选择"I Agree..." 然后点击 "Accept" 按钮。 现在你在服务列表中应该就可以看到 Google Maps API v3 已经变为 "on"（开启）状态。
接着在左侧菜单中点击 "API Access" ，在右侧栏中将看到以下提示 "Create an OAuth 2.0 client id..."。
点击 "Create an OAuth 2.0 client id..."，将弹出一个表单，表单需要你填入你的项目名称，项目图片或者logo，然后点击 "Next" 按钮。
然后，我们需要选择应用类型 ("Web application" ：网站应用), 然后填写你的站点地址，之后点击 "Create Client Id" 按钮即可。
最后我们就可以得到我们需要的 API key,如下图所示：
注意： 保存你的API key！ ( 在填写的指定 URL 中开发所有的 Google 地图应用你需要使用该API key)。
现在让我们创建一个简单的 Google 地图。
以下是显示了英国伦敦的 Google 地图：
我们以以上实例来解析 Google 地图的创建过程。
大多数浏览器使用 "标准模式" 的 HTML5 文档渲染页面，这就意味着你的应用是兼容各大浏览器的。
另外，如果没有DOCTYPE标签，浏览器则使用混杂模式 (quirks mode)进行渲染页面内容。
提示： 应该注意的是一些"混杂模式 "中的CSS并不能使用于标准模式中。在具体的应用中，所有基于百分比的大小都必须从父块元素继承 。如果在父模块中没有指定大小，默认值为 0 x 0 像素。如果你想使用百分比，可以在<style> 标签中声明，如下所示：
这个样式声明表明地图模块的（GoogleMap）应 HTML高度为100%。
在以下实例中第一个<script> 标签中必须包含 Google 地图 API：
将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)。
The sensor 参数是必须的，该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。
HTTPS
如果你的应用是安全的HTTP(HTTPS:HTTP Secure)应用,你可以使用 HTTPS 来加载 Google 地图 API：
异步加载
同样我们也可以在页面完全载入后再加载 Google 地图 API。
以下实例使用了 window.onload 来实现页面完全载入后加载 Google 地图 。 loadScript() 函数创建了加载 Google 地图 API <script> 标签。此外在标签的末尾添加了 callback=initialize 参数， initialize()作为回调函数会在API完全载入后执行：
在初始化地图前，我们需要先创建一个 Map 属性对象来定义一些地图的属性：
center（中心点）
中心属性指定了地图的中心，该中心通过坐标（纬度，经度）在地图上创建一个中心点。
Zoom（缩放级数）
zoom 属性指定了地图的 缩放级数。zoom: 0 显示了整个地球地图的完全缩放。
MapTypeId（地图的初始类型）
mapTypeId 属性指定了地图的初始类型。
mapTypeId包括如下四种类型：
通常 Google 地图使用于 <div> 元素中：
注意： 地图将以div中设置的大小来显示地图的大小，所以我们可以在 <div> 元素中设置地图的大小。
以上代码使用参数(mapProp)在<div> 元素 (id为googleMap) 创建了一个新的地图。
提示：如果想在页面中创建多个地图，你只需要添加新的地图对象即可。
以下实例定义了四个地图实例 (四个地图使用了不同的地图类型):
窗口载入后通过执行 initialize() 函数来初始化 Map 对象，这样可以确保在页面完全载入后再加载 Google 地图：
在Google地图中添加一个标记
叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。
Google 地图 API 有如下几种叠加层：
记标识地图上的点。默认情况下，它们使用 G_DEFAULT_ICON（您也可以指定自定义图标）。GMarker 构造函数将 GLatLng 和 GMarkerOptions（可选）对象作为参数。
标记设计为可交互。例如，默认情况下它们接收 "click" 事件，常用于在事件侦听器中打开信息窗口。通过 setMap() 方法在地图上添加标记:
以下实例将介绍如何使用 animation 属性来拖动标记:
标记可以用自定义的新图标来显示，以替代默认图标:
GPolyline 对象可在地图上创建线性叠加层。GPolyline 包括一系列点，并创建一系列有序连接这些点的线段。
折线支持以下属性：
GPolygon 对象类似于 GPolyline 对象，因为它们都包括一系列有序的点。但是，多边形不像折线一样有两个端点，而是设计为定义形成闭环的区域。
和折线一样，您可以自定义多边形边（线）的颜色、粗细和透明度，以及封闭的填充区域的颜色和透明度。颜色应是十六进制数字 HTML 样式。
多边形支持以下属性：
圆支持以下属性：
在一个标记上显示一个文本信息窗口：
点击标记缩放地图 - 绑定在google地图上的事件。
我们仍然使用上一遍文章使用的英国伦敦的地图。
点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。
代码如下：
使用 addListener() 事件处理程序来注册事件的监听。该方法使用一个对象，一个事件来监听，当指定的事件发生时 函数将被调用。
我们通过给地图添加事件处理程序来改变 'center' 属性，以下代码使用 center_changed 事件在3秒后标记移会中心点:
点击标记在信息窗口显示一些文本信息：
当用户点击地图时执行一个窗口
用户点击地图某个位置时使用 placeMarker() 函数在指定位置上放置一个标记，并弹出信息窗口：
一个Google 地图 - 默认控件集设置：
当使用一个标准的google地图，它的默认设置如下：
除了以上默认控件集,Google还有：
创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。
你可能希望能够关闭默认的控件集。
为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:
一些控件集默认显示在地图上，而其它的不会，除非你设置它们。
设置控件为true使其可见-设置控件为false则隐藏它。
以下实例开启所有的控件：
某些地图控件是可配置的。通过制定控件选项域改变控件集。
F举个例子来说，修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项：
注意： 如果需要修改一个控件，首先开启控件(设置其为true)。
另一个控件为 MapType 控件。
MapType 控件可显示为以下 style 选项之一：
同样你可以使用ControlPosition属性指定控件的位置:
创建一个返回伦敦自定义控件，用于点击事件： (如果地图被拖拽):
HYBRID类型的google地图:
Google Maps API 中提供了以下地图类型：
MapTypeId.ROADMAP，用于显示默认的道路地图视图MapTypeId.SATELLITE，用于显示 Google 地球卫星图片MapTypeId.HYBRID，用于同时显示普通视图和卫星视图MapTypeId.TERRAIN，用于根据地形信息显示实际地图。
要通过 Map 修改正在使用的地图类型，您可以为其设置 mapTypeId 属性:
或者动态修改 mapTypeId：
Google Maps API 针对特定位置支持特殊的 45° 图像。
此类高分辨率图像可提供朝向各基本方向（东南西北）的透视视图。对于支持的地图类型，这些图片还可提供更高的缩放级别。
现有的 google.maps.MapTypeId.SATELLITE 和 google.maps.MapTypeId.HYBRID 地图类型支持高缩放级别的 45° 透视图像（如果有的话）。如果您放大的位置拥有此类图像，那么这些地图类型将会自动通过以下方式更改其视图：
注意：缩小显示 45° 图像的地图类型将会还原所有更改，并重新构建原始地图类型。
以下示例显示了意大利威尼斯公爵宫45°视图：
提示：Google 正在不断地为更多城市添加 45° 图像。有关最新信息，请参阅 Google 地图上的 45° 图像列表。
您可以通过在 Map 对象上调用 setTilt(0) 来停用 45° 图像。要启用适用于支持的地图类型的 45° 透视图像，请调用 setTilt(45)。
| 构造函数/对象 | 描述 |
|---|---|
| Map() | 在指定的 HTML 容器中创建新的地图，该容器通常是一个DIV元素。 |
| 构造函数/对象 | 描述 |
|---|---|
| Marker | 创建一个标记。 |
| MarkerOptions | 标记的选项。由DirectionsRenderer渲染的所有标记都将使用这些选项。 |
| MarkerImage | A structure representing a Marker icon or shadow image |
| MarkerShape | Defines the marker shape to use in determination of a marker's clickable region (type and coord) |
| Animation | Specifies animations that can be played on a marker (bounce or drop) |
| InfoWindow | Creates an info window |
| InfoWindowOptions | Options for rendering the info window |
| Polyline | Creates a polyline (contains path and stroke styles) |
| PolylineOptions | Options for rendering the polyline |
| Polygon | Creates a polygon (contains path and stroke+fill styles) |
| PolygonOptions | Options for rendering the polygon |
| Rectangle | Creates a rectangle (contains bounds and stroke+fill styles) |
| RectangleOptions | Options for rendering the rectangle |
| Circle | Creates a circle (contains center+radius and stroke+fill styles) |
| CircleOptions | Options for rendering the circle |
| GroundOverlay | |
| GroundOverlayOptions | |
| OverlayView | |
| MapPanes | |
| MapCanvasProjection |
| 构造函数/对象 | 描述 |
|---|---|
| MapsEventListener | It has no methods and no constructor. Its instances are returned from addListener(), addDomListener() and are eventually passed back to removeListener() |
| event | Adds/Removes/Trigger event listeners |
| MouseEvent | Returned from various mouse events on the map and overlays |
| 构造函数/对象 | 描述 |
|---|---|
| MapTypeControlOptions | Holds options for modifying a control (position and style) |
| MapTypeControlStyle | Specifies what kind of map control to display (Drop-down menu or buttons) |
| OverviewMapControlOptions | Options for rendering of the overview map control (opened or collapsed) |
| PanControlOptions | Options for rendering of the pan control (position) |
| RotateControlOptions | Options for rendering of the rotate control (position) |
| ScaleControlOptions | Options for rendering of the scale control (position and style) |
| ScaleControlStyle | Specifies what kind of scale control to display |
| StreetViewControlOptions | Options for rendering of the street view pegman control (position) |
| ZoomControlOptions | Options for rendering of the zoom control (position and style) |
| ZoomControlStyle | Specifies what kind of zoom control to display (large or small) |
| ControlPosition | Specifies the placement of controls on the map |
Map() 构造器创建了一个新的地图并插入到指定的HTML元素中（<div> 元素)。
| 参数 | 描述 |
|---|---|
| HTMLElement | 规定要把地图放置在那个 HTML 元素中。 |
| MapOptions | 带有地图初始化变量/选项的 MapOptions 对象。 |
| 方法 | 返回值 | 描述 |
|---|---|---|
| fitBounds(LatLngBounds) | None | 设置要包含给定边界的视口。 |
| getBounds() | LatLng,LatLng | 返回当前视口的西南纬度/经度和东北纬度/经度。 |
| getCenter() | LatLng | 返回地图的中心的纬度/经度。 |
| getDiv() | Node | 返回包含地图的 DOM 对象。 |
| getHeading() | number | 返回航拍图像的罗盘航向（支持 SATELLITE 和 HYBRID 地图类型）。 |
| getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | 返回当前地图类型。 |
| getProjection() | Projection | 返回当前 Projection（投影）。 |
| getStreetView() | StreetViewPanorama | 返回绑定到地图的默认的 StreetViewPanorama。 |
| getTilt() | number | 返回航拍图像的入射角度数（支持 SATELLITE 和 HYBRID 地图类型）。 |
| getZoom() | number | 返回地图的当前缩放级别。 |
| panBy(xnumber,ynumber) | None | 通过以像素计的给定距离改变地图的中心。 |
| panTo(LatLng) | None | 改变地图的中心为给定的 LatLng。 |
| panToBounds(LatLngBounds) | None | 将地图平移所需的最小距离以包含给定的 LatLngBounds。 |
| setCenter(LatLng) | None | |
| setHeading(number) | None | 设置航拍图像的罗盘方向（以度为单位进行测量），基本方向为北方。 |
| setMapTypeId(MapTypeId) | None | 改变要显示的地图类型。 |
| setOptions(MapOptions) | None | |
| setStreetView(StreetViewPanorama) | None | 绑定一个 StreetViewPanorama 到地图上。 |
| setTilt(number) | None | 设置航拍图像的入射角度数（支持 SATELLITE 和 HYBRID 地图类型）。 |
| setZoom(number) | None |
| 属性 | 类型 | 描述 |
|---|---|---|
| controls | Array.<MVCArray.<Node>> | 要附加到地图上的额外控件。 |
| mapTypes | MapTypeRegistry | 按字符串 ID 划分的 MapType 实例的注册表。 |
| overlayMapTypes | MVCArray.<MapType> | 要叠加的额外地图类型。 |
| 事件 | 参数 | 描述 |
|---|---|---|
| bounds_changed | None | 当可视区域范围更改时会触发此事件。 |
| center_changed | None | 当地图 center（中心）属性更改时会触发此事件。 |
| click | MouseEvent | 当用户点击地图（但不是点击标记或信息窗口）时会触发此事件。 |
| dblclick | MouseEvent | 当用户双击地图时会触发此事件。请注意，触发此事件前还会触发点击事件。 |
| drag | None | 当用户拖动地图时会反复触发此事件。 |
| dragend | None | 当用户停止拖动地图时会触发此事件。 |
| dragstart | None | 当用户开始拖动地图时会触发此事件。 |
| heading_changed | None | 当地图 heading（方向）属性更改时会触发此事件。 |
| idle | None | 当地图在平移或缩放之后变为闲置状态时会触发此事件。 |
| maptypeid_changed | None | 当 mapTypeId 属性更改时会触发此事件。 |
| mousemove | MouseEvent | 只要用户的鼠标在地图容器上移动，就会触发此事件。 |
| mouseout | MouseEvent | 当用户的鼠标从地图容器上退出时会触发此事件。 |
| mouseover | MouseEvent | 当用户的鼠标进入地图容器时会触发此事件。 |
| projection_changed | None | 当投影更改时会触发此事件。 |
| resize | None | 当地图（div）更改尺寸时会触发此事件。 |
| rightclick | MouseEvent | 当用户右击地图时会触发此事件。 |
| tilesloaded | None | 当可见图块载入完成后会触发此事件。 |
| tilt_changed | None | 当地图 tilt（倾斜）属性更改时会触发此事件。 |
| zoom_changed | None | 当地图 zoom（缩放）属性更改时会触发此事件。 |
点我分享笔记