初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图：

查看示例 (map-simple.html)

即使在这个简单的示例中，也有几点需要注意：

1. 我们使用了  声明将应用程序声明为 HTML5。
2. 使用 script 标记来加入 Maps API JavaScript。
3. 我们创建一个名为“map_canvas”的 div 元素来承载该地图。
4. 创建 Javascript 对象常量以保存若干地图属性。
5. 编写 Javascript 函数以创建“map”对象。
6. 我们从 body 标记的 onload 事件初始化该地图对象。

下文说明了这些步骤。

将您的应用程序声明为 HTML5

我们建议您在自己的网络应用程序内声明一个真实的 DOCTYPE。在本文的这些例子中，我们使用了简单的 HTML5 DOCTYPE 将应用程序声明为 HTML5，如下所示：

当前的大部分浏览器会以“标准模式”呈现使用此 DOCTYPE 声明的内容，这意味着您的应用程序应当具有更强的跨浏览器适应能力。DOCTYPE 还被设计为可适度降级；无法理解它的浏览器会将它忽略，并使用“兼容模式”来显示内容。

请注意，某些在兼容模式下工作的 CSS 在标准模式中是无效的。具体地说，所有以百分比表示的尺寸必须继承自父块元素，而如果这些父元素中的某个父元素没有指定尺寸，则系统会将其尺寸假定为 0x0 像素。为此，我们加入了以下 

该 CSS 声明表示地图容器 （名称为 map_canvas）应当占据 HTML 主体的完整高度。请注意，我们还应当明确声明  和  的相应百分比。

载入 Google Maps API

http://maps.google.com/maps/api/js 网址指向 Javascript 文件所在的位置，该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的 script 标签。

此标头中的  标签会指定如下内容：即应当以全屏模式显示该地图，且用户不能调整地图尺寸。（有关详细信息，请参见开发移动设备部分。）

请注意，我们还需要设置 sensor 参数，以指明此应用程序是否使用传感器确定用户的位置。在此示例中，我们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值显式设为 true 或 false。

当通过 http://maps.google.com/maps/api/js 网址加载 JavaScript Maps API 时，您还可以选择使用 libraries 参数来加载其他库。库是向主 JavaScript API 提供其他功能的代码的模块，但只有在您专门请求时才会加载。有关详情，请参见 V3 Maps API 中的库。

如果您的应用程序是 HTTPS 应用程序，则您可以改为阅读通过 HTTPS 加载 Google Maps JavaScript API。

地图 DOM 元素

要在网页上显示地图，我们必须为其留出一个位置。通常，我们的做法是创建一个名为 div 的元素，然后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。

在上述示例中，我们定义了名为“map_canvas”的  并使用样式属性设置其大小。请注意，该尺寸已设置为“100％”，这将会展开地图，使之符合移动设备的屏幕尺寸。您可能需要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意，地图总是会根据其中所包含的元素的大小决定其本身的尺寸，因此，您必须始终在  上显式设置一个适用的尺寸。

地图选项

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {zoom: 8,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP
};

要初始化地图，我们需要先创建一个包含地图初始化变量的 Map options 对象。该对象不是构建出来的，而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点，因此，我们还需要创建一个 latlng 值，以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息，请参阅下面的 纬度和经度部分。

我们还设置了初始缩放级别，并将 mapTypeId 设置为 google.maps.MapTypeId.ROADMAP。系统支持以下类型：

• ROADMAP，用于显示 Google Maps 默认的普通二维图块。
• SATELLITE，用于显示拍摄的图块。
• HYBRID，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。
• TERRAIN，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。

与 Google Maps 第 2 版 API 不同的是，第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型，才能查看相应的图块。

关于地图类型的详情，请参见地图类型部分。不过大部分情况下，您只需了解上述基本类型的使用就足够了。

google.maps.Map - 基本对象

var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

Map 类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。（您可以创建此类的多个实例，每个对象都将在网页上定义一个单独的地图。）我们使用 Javascript new 操作符创建此类的一个新实例。

创建新的地图实例时，您需要在网页中指定一个  HTML 元素作为地图的容器。HTML 节点是 Javascript document 对象的子对象，而且我们通过 document.getElementById()方法获得该元素的引用。

此代码可定义一个名为 map 的变量，然后将该变量分配给新的 Map 对象，同时将该变量传递到在 myOptions 对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map()函数称为“构造函数”，其定义如下：

载入地图

呈现 HTML 网页时，会扩展文档对象模型 (DOM)，接收任何外部图像和脚本并将其合并到 document 对象中。为了确保系统在完全载入网页后才将我们的地图添加到网页上，我们只会在 HTML 网页的  元素收到 onload 事件后，才会执行用于构建 Map 对象的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。

body 标签的 onload 属性是事件处理程序的一个示例。Google Maps Javascript API 还提供了一组事件，可供您进行处理以确定状态变化。有关详细信息，请参阅地图事件部分。

查看示例 (map-simple.html)

纬度和经度

我们还需要一种引用各种地图位置的方法。在 Google Maps API 中，google.maps.LatLng 对象提供了此类机制。您可以构建一个 LatLng 对象，以 {纬度, 经度} 的顺序传递其参数：

  var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

请注意：将“地址”转变为地理地点的过程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。有关详细信息，请参见服务部分中的地址解析。

LatLng 对象在 Google Maps API 中用途广泛。例如，google.maps.Marker 对象会在其构造函数中应用 LatLng，并在地图上所指定的地理位置上添加标记 叠加层。

缩放级别

如果要将包含完整地球的地图作为单幅图片提供，则要么需要极大的地图，要么需要分辨率极低的小型地图。因此，Google Maps 和 Maps API 内的地图图像被分割为地图“图块”和“缩放级别”两部分。在低缩放级别下，一小组地图图块就可以覆盖广阔的区域；而在高缩放级别下，图块的分辨率会更高，覆盖的区域则会更小。

要指定地图的显示分辨率，您可以设置 Map 的 zoom 属性，其中缩放 0 相当于将地球地图缩小到最低程度，而较高的缩放级别会将地图放大到较高的分辨率。

下面三张图片分别反映了东京的同一位置在缩放级别为 0、7、18 时的情景。

关于 Maps API 如何基于当前缩放级别加载图块的详情，请参见“地图类型”文档中的图块坐标。