//建议您在自己的网络应用内声明一个真实的 DOCTYPE。在本文的示例中，我们使用简单的 HTML5
DOCTYPE 将应用声明为 HTML5。当前的大多数浏览器会 以“标准模式”呈现使用此 DOCTYPE 声明的内容，这意味着您的应用应具有更强的跨浏览器适应能力。DOCTYPE 还设计为可适度降级；无法理解该声明的浏览器会将其忽略，并使用“兼容模式”来显示其内容。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> //请注意，某些在兼容模式下工作的 CSS 在标准模式中是无效的。具体地说，所有以百分比表示的大小必须继承自父块元素， 而如果这些父元素中的某个父元素没有指定大小，则系统会将其大小假定为 0x0 像素。因此，我们加入了以下<style>声明。 该 CSS 声明用于表示地图容器<div>（名为map_canvas）应占据 HTML 主体的整个高度。请注意，我们还必须明确声明<body>和<html>所占的百分比。 <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> //加载google map apiscript标记中包含指向 JavaScript 文件所处位置的网址，该 JavaScript 文件可加载使用 Google Maps API 所需的所有符号和定义。script为必填标记。key参数包含您应用的 API 密钥。请注意，此密钥不适用于 v2 API，且必须通过 API 控制台生成。 网址的sensor参数（必须添加）用于表示应用是否会使用 GPS 定位器等传感器来确定用户的位置。 在此示例中，我们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值明确设为true或false。 如果您的应用是 HTTPS 应用，那么您可改为通过 HTTPS 加载 Google Maps JavaScript API。 在 SSL 应用中必须通过 HTTPS 加载 Maps API，以免在大多数浏览器中显示安全警告，并且建议您对请求中包含用户所处位置等敏感用户数据的应用也采用该做法。 在通过http://maps.googleapis.com/maps/api/js网址加载 JavaScript Maps API 时，您也可以选择使用libraries参数加载其他库。 库是用于向主 JavaScript API 提供其他功能的代码模块，不过只有在您专门请求时才会加载。 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script> <script type="text/javascript"> //异步加载api 您可能希望在网页完全加载后或根据需要加载 Maps API JavaScript 代码。 为此，您可以插入自己的<script>标记作为针对window.onload事件或函数调用的响应， 不过您还需要指示 Maps JavaScript API 引导程序在 Maps JavaScript API 代码完全加载后再执行应用代码。 要实现此目的，您可以使用callback参数，该参数为函数要在 API 完全加载后执行的变量 function initialize() { //要初始化地图，我们需要先创建一个Map options对象来包含地图初始化变量。该对象不是构建出来的，而是以对象常量的形式创建得到的。 var mapOptions = { //由于我们要通过center将地图中心设为特定的点，因此会创建LatLng对象，同时按 {纬度,经度} 的顺序传递位置的坐标，以存储该位置： center: new google.maps.LatLng(-34.397, 150.644), //地图显示时的初始分辨率可以通过zoom属性进行设置，其中缩放0相当于地球地图可缩小的最低级别，并且缩放级别越高，地图放大的分辨率就越高。 如果要将包含完整地球的地图作为单张图片提供，要么需要极大的地图，要么需要分辨率较低的小型地图。因此，Google 地图和 Maps API 内的地图图片 会被分割为地图“图块”和“缩放级别”两部分。在低缩放级别下，一小组地图图块就可以覆盖广阔的区域；而在高缩放级别下，图块的分辨率较高， 覆盖的区域则较小。 zoom: 8, //明确设置一个初始地图类型 系统支持以下地图类型：
ROADMAP，用于显示 Google 地图的默认、普通 2D 图块。SATELLITE，用于显示拍摄的图块。HYBRID，用于同时显示拍摄的图块和重要地图项（道路、城市名）的图块图层。TERRAIN，用于显示自然地形图块，其中包含海拔和水体地图项（山脉、河流等）。
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//用于代表地图的 JavaScript 类属于 Map 类。此类的对象定义了网页上的单个地图。
（您可以创建多个此类的实例，每个对象都将在网页上定义一个单独的地图。）我们使用 Javascript new 运算符创建了一个此类的新实例。
创建新的地图实例时，您需要在网页中指定一个 <div> HTML 元素作为地图的容器。HTML 节点是 Javascript document 对象的子对象，
我们通过 document.getElementById() 方法获取了对该元素的引用。
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
此代码用于定义一个变量（名为 map），然后将其分配至新的 Map 对象，同时传递到 mapOptions 对象常量所定义的选项中。这些选项将用于初始化地图的属性
<body onload="initialize()">
//对于要在网页上显示的地图，我们需要为其留出一个位置。通常，我们会创建一个名为 div 的元素，然后在浏览器的文档对象模型 (DOM) 中获取对此元素的引用。
在以上示例中，我们定义了一个名为“map_canvas”的 <div>，并使用样式属性为其设置大小。
请注意，这一大小已设置为“100％”，这将会展开地图，使之符合移动设备的屏幕大小。
您可能需要根据浏览器的屏幕大小和填充区域调整这些值。
请注意，地图将始终根据其中所包含的元素的大小决定其本身大小，因此，您必须始终为 <div> 明确设置一个适用的大小。
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>