google maps helloWorld

任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了 google.maps.Map 基础对象的用法和地图操作的基础知识。（如果您已经学习了第 2 版的辅导手册，您会发现，这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别，因此，请仔细阅读本文。）

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN#api_key
以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="100%; height:100%"></div>
</body>
</html>

注意:css中关于body的设置不能少，否则什么都没有。我就是因为这个问题搞了1个小时。

如果将body 的height 设置为50%，页面只显示一半。

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

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

将您的应用程序声明为 HTML5

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

<!DOCTYPE html>

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

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

<styletype="text/css">
  html {height:100%}
  body {height:100%;margin:0px;padding:0px}
  #map_canvas {height:100%}
</style>

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

载入 Google Maps API

<html>
<head>
<metaname="viewport"content="initial-scale=1.0, user-scalable=no"/>
<scripttype="text/javascript"src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>

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

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

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

地图 DOM 元素

<divid="map_canvas"style="width:100%;height:100%"></div>

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

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

地图选项

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 类。此类的对象定义了网页上的单个地图。（您可以创建此类的多个实例，每个对象都将在网页上定义一个单独的地图。）我们使用 Javascriptnew 操作符创建此类的一个新实例。

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

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

google.maps.Map( opts?)

异步加载 JavaScript API

一般来说，如果您是通过以下方法加载页面的话，那么 JavaScript Maps API 会在页面加载时立即加载：即使用 <script> 标记加入 API 并在脚本加载完毕后执行应用程序 JavaScript 代码。然而，当解析该 JavaScript 时，您的浏览器可能不会在页面上呈现其他内容。大部分情况下，这一延迟并不会引起注意，但是您可能会希望在页面加载完毕后再加载 Maps API JavaScript 代码，或者根据需要加载 Maps API JavaScript。

要在页面加载完毕后再加载 Maps JavaScript API，方法十分简单：您只需插入自己的 <script> 标记作为对 window.onload 事件的响应即可；但您还需要指示 Maps JavaScript API 引导程序在 Maps JavaScript API 代码完全加载后再执行应用程序代码。要实现此目的，您可以使用 callback 参数。该参数是在 API 加载完毕时，函数要执行的变量。

以下代码可指示应用程序在页面完全加载后再加载 Maps API（使用 window.onload），并在该页面中将 Maps JavaScript API 写入 <script> 标记。此外，我们还通过向 Maps API 引导程序传递 callback=initialize 来指示该 API 仅在自身完全加载后再执行 initialize() 函数：

function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
  
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}
  
window.onload = loadScript;

google maps helloWorld

地图 DOM 元素

地图选项

google.maps.Map - 基本对象

异步加载 JavaScript API

`google.maps.Map` - 基本对象