谷歌地图 - 入门

Google地图入门 - 免费的Google地图教程，参考手册和初学者指南，Google Maps JavaScript API教程。了解如何使用地图类型，缩放，本地化地图，UI控件，标记，形状，叠加层，信息窗口，符号和地图事件中的Google Maps JavaScript API。

什么是Google地图？

Google地图是Google提供的免费网络地图服务，可提供各种类型的地理信息.使用谷歌地图，可以.

搜索地点或获取从一个地方到另一个地方的路线.
查看并浏览世界各个城市的水平和垂直全景街道图像.
获取特定信息，例如特定点的流量.

Google地图提供了一个API，您可以使用该API自定义地图及其上显示的信息.本章介绍如何使用HTML和JavaScript在网页上加载简单的Google地图.

在网页上加载地图的步骤

关注以下步骤在您的网页上加载地图 :

步骤1:创建HTML页面

创建一个带头部的基本HTML页面body标签如下所示 :

                  ..............

第2步:加载API

使用脚本标记加载或包含Google Maps API，如下所示 : ;

                        ..............

第3步:创建容器

要保存地图，我们必须创建一个容器元素，通常是< DIV> tag(通用容器)用于此目的.创建一个容器元素并定义其尺寸，如下所示 :

第4步:地图选项

在初始化地图之前，我们必须创建 mapOptions object(它就像文字一样创建)并为map初始化变量设置值.地图有三个主要选项，即中心，缩放和 maptypeid .

中心 : 在此属性下，我们必须指定要将地图居中的位置.要传递位置，我们必须通过将所需位置的纬度和经度传递给构造函数来创建 LatLng 对象.
缩放 : 在此属性下，我们必须指定地图的缩放级别.
maptypeid : 在此属性下，我们必须指定所需的地图类型.以下是Google提供的地图类型 :

ROADMAP(普通，默认2D地图)
SATELLITE(摄影地图)
HYBRID(两种或多种其他类型的组合)
TERRAIN(山地，河流等地图) )

在一个函数中，比方说， loadMap()，创建mapOptions对象并为center，zoom和mapTypeId设置所需的值，如下所示.

function loadMap() {   var mapOptions = {      center:new google.maps.LatLng(17.240498, 82.287598),       zoom:9,       mapTypeId:google.maps.MapTypeId.ROADMAP   };}

步骤5:创建地图对象

您可以通过实例化JavaScript来创建地图类称为地图.在实例化此类时，您必须传递一个HTML容器来保存所需地图的地图和地图选项.创建一个地图对象，如下所示.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

第6步:加载地图

最后通过调用loadMap()方法或添加DOM来加载地图听众.

google.maps.event.addDomListener(window, 'load', loadMap);                    or

示例

以下示例显示如何加载名为Vishakhapatnam的城市的路线图，其缩放值为12 .