Google Maps 入门
什么是 Google 地图？
Google 地图是 Google 提供的免费网络地图服务，可提供各种类型的地理信息。使用 Google 地图，可以。
搜索地点或查询从一个地点到另一地点的路线。
查看和浏览世界各地城市的水平和垂直全景街道图像。
获取特定信息，例如特定点的流量。
Google 地图提供了一个 API，您可以使用该 API 自定义地图及其上显示的信息。本章介绍了如何使用 HTML 和 JavaScript 在您的网页上加载一个简单的 Google 地图。
在网页上加载地图的步骤
按照下面给出的步骤在您的网页上加载地图-
第 1 步：创建 HTML 页面
创建一个带有 head 和 body 标签的基本 HTML 页面，如下所示-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
..............
</body>
</html>
第 2 步：加载 API
使用脚本标签加载或包含 Google Maps API，如下所示-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>
第 3 步：创建容器
为了保存地图，我们必须创建一个容器元素，通常使用
标签（通用容器）用于此目的。创建一个容器元素并定义其尺寸，如下所示-
<div id = "sample" style = "width:900px; height:580px;"></div>
第 4 步：地图选项
在初始化地图之前，我们必须创建一个
mapOptions 对象（它的创建就像文字一样）并为地图初始化变量设置值。地图具有三个主要选项，即
center、
zoom 和
maptypeid。
center-在此属性下，我们必须指定要使地图居中的位置。要传递位置，我们必须通过将所需位置的纬度和经度传递给构造函数来创建一个 LatLng 对象。
zoom-在此属性下，我们必须指定地图的缩放级别。
maptypeid− 在这个属性下，我们必须指定我们想要的地图类型。以下是 Google 提供的地图类型-
在一个函数中，比如
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：创建地图对象
您可以通过实例化名为
Map 的 JavaScript 类来创建地图。在实例化此类时，您必须传递一个 HTML 容器来保存地图和所需地图的地图选项。创建地图对象如下所示。
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
第六步：加载地图
最后通过调用 loadMap() 方法或添加 DOM 监听器来加载地图。
google.maps.event.addDomListener(window, 'load', loadMap);
or
<body onload = "loadMap()">
示例
以下示例显示了如何加载名为 Vishakhapatnam 的城市的路线图，缩放值为 12、
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
