Google地图基础教程与入门使用指南

创建一个简单的 Google 地图下面我们来一步步创建一个简单的 Google 地图，并了解最基础的嵌入方法。以下示例展示的是位于英国伦敦的 Google 地图：实例 function initialize() { var mapProp = { center:new google maps

创建一个简单的 Google 地图

下面我们来一步步创建一个简单的 Google 地图，并了解最基础的嵌入方法。

Google 地图基础

以下示例展示的是位于英国伦敦的 Google 地图：

接下来，我们结合上面的代码示例，详细解析 Google 地图的创建流程与关键配置。

大多数现代浏览器会以“标准模式”渲染 HTML5 文档，这意味着你的页面和 Google 地图应用能够更好地兼容主流浏览器。

另外，如果没有 DOCTYPE 声明，浏览器通常会进入混杂模式（quirks mode）来渲染页面内容。

提示： 需要注意的是，一些“混杂模式”下可用的 CSS 在标准模式中并不适用。在实际开发中，所有基于百分比的尺寸都必须从父级块元素继承。如果父元素没有指定大小，默认值可能就是 0 x 0 像素。如果你想使用百分比高度，可以在

这段样式声明表示地图容器（GoogleMap）的 HTML 高度设置为 100%，从而让地图可以按预期完整显示。

在下面的示例中，第一个

将 Google 生成的 API Key 放在 key 参数中（key=YOUR_API_KEY）。

sensor 参数是必须的，它用于说明应用程序是否通过传感器（例如 GPS 导航）来定位用户位置。该参数的值可以设置为 true 或 false。

HTTPS

如果你的应用运行在安全的 HTTP（HTTPS: HTTP Secure）环境下，那么你也应该使用 HTTPS 地址来加载 Google 地图 API：

异步加载

同样，我们也可以在页面完全加载完成之后，再异步加载 Google 地图 API。

下面这个示例使用的是 window.onload，作用非常直接：等整个页面彻底加载完成后，再去加载 Google 地图。loadScript() 函数负责动态创建用于引入 Google Maps API 的