最近项目用到谷歌地图，但是看谷歌api文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。但是因为本人太懒了，每次研究技术完事时间一久就忘了，更别提分享了，在朋友的鼓励支持之下，重新开始写博客，共享给大家，如果有不到位或者错误的地方还希望大家多多指教。 毕竟交流才会进步(^o^)/~
好了，废话不多说开始正题。
谷歌地图官网：https://developers.google.com...
入门指南：https://developers.google.com...
好了，下面就贴一段简单的案例代码，入门指南里的
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&callback=initMap"></script>
</body>
</html>
引入的js里需要一个秘钥，现在引用的这个是可用的，如果想自己创建一个可以去官网里自己申请创建。
下面说下Google 地图创建注意点：
1. 必须是用 <!DOCTYPE html> 声明以 HTML5 形式声明应用。
大多数浏览器使用 "标准模式" 的 HTML5 文档渲染页面，这就意味着你的应用是兼容各大浏览器的。
另外，如果没有DOCTYPE标签，浏览器则使用混杂模式 (quirks mode)进行渲染页面内容。 提示： 应该注意的是一些"混杂模式"中的CSS并不能使用与标准模式中。在具体的应用中，所有基于百分比的大小都必须从父块元素继承 。如果在父模块中没有指定大小，默认值为 0 x 0 像素。如果你想使用百分比，可以在<style> 标签中声明，如下所示：
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
请输入代码 这个样式声明表明地图模块的（GoogleMap）应 HTML高度为100%。
2. 添加 Google 地图 API Key
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)。 The sensor 参数是必须的，该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。
3. 地图 DOM 元素
<div id="map"></div>
要想在网页上显示地图，我们必须为其预留一个位置。我们通常的实现方式是：创建一个命名的 div 元素，然后在浏览器的文档对象模型 (DOM) 中获取对该元素的引用。
4. 创建一个 Map 对象
map = new google.maps.Map(document.getElementById("map"), {...});
表示地图的 JavaScript 类是 Map 类。该类的对象定义页面上的单个地图。（您可以创建该类的多个实例–每个对象都将定义页面上的一个不同地图。）我们利用 JavaScript new 运算符来新建该类的实例。
当您新建地图实例时，您需要在页面中以地图容器形式指定一个 <div> HTML 元素。HTML 节点是 JavaScript document 对象的子项，我们通过 document.getElementById() 方法获取对该元素的引用。
5. 定义地图属性
每个地图都有两个必需选项：center 和 zoom。还可以加上MapTypeId
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
center（中心点）：中心属性指定了地图的中心，该中心通过坐标（纬度，经度）在地图上创建一个中心点。
Zoom（缩放级数）：zoom 属性指定了地图的 缩放级数。zoom: 0 显示了整个地球地图的完全缩放。
-
MapTypeId（地图的初始类型）：mapTypeId 属性指定了地图的初始类型。mapTypeId包括如下四种类型：
google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层
google.maps.MapTypeId.ROADMAP：显示普通的街道地图
google.maps.MapTypeId.SATELLITE：显示卫星图像
google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图
好了，上述基本都是从官网上贴来整理的，至此应该都能正常创建地图了。
新手注意：
但是问题来了，因为当时做项目，项目比较大，而且时间很紧，有个细节当时没注意，就是在写js的过程中，函数命名必须要要有 initMap()，不然会报错，提示 Uncaught InvalidValueError: initMap is not a function.
项目中有的地图是需要点击弹出地图层的，点击事件才要执行方法，然而每次都是自动执行，提示各种问题。百度谷歌了好久，答案纷飞，仍然毫无头绪，然后又耐心从头操作了一遍，看文档，对，当看到引入的js的时候，里面有个&callback=initMap ，卧槽，大骂一句，放到这么不起眼的地方，这不坑人么。 这句话应该删除的。
后来仔细想想，还是自己技术不够扎实，如果没有callback 这个js里的initMap() 又怎么会执行呢？
今天先写这么多，明天写下如何创建marker标记，记录坐标位置，加油(^o^)/~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。