创建一个基本的谷歌地图
这个例子创建一个谷歌地图在英国伦敦为中心的：
例
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
试一试» 本页面的其余部分描述上面的例子中，一步一步来。
1.将谷歌API
谷歌地图API是一个JavaScript库。 它可以被添加到与网页<script>标记：
<script src="http://maps.googleapis.com/maps/api/js"></script>2.设置地图属性
创建一个函数来初始化地图：
function initialize() {
}在初始化功能，创建一个对象(mapProp)定义为地图的属性：
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};该中心属性指定将地图。 创建一个经纬度对象，将地图上的特定点。 通过坐标顺序为：纬度，经度。
zoom属性指定地图缩放级别。 变焦：0显示地图地球完全缩小。 更高的缩放级别以较高的分辨率放大]。
该mapTypeId属性指定地图类型以显示。 以下地图类型的支持：
- ROADMAP (normal, default 2D map)
- 卫星(photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
3.创建一个地图容器
创建一个<div>元素来保存地图。 使用CSS大小的元素：
<div id="googleMap" style="width:500px;height:380px;"></div>该地图将始终"inherit"从它的容器元素的大小。
4.创建一个映射对象
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);上面的代码创建了一个内部的新地图<div>使用id =“GoogleMap的”元素，使用传递的参数(mapProp)
5.添加事件监听器来加载地图
添加DOM监听器将执行initialize()在窗口load功能(when the page is loaded) ：
google.maps.event.addDomListener(window, 'load', initialize);
异步加载
它也可以根据需要加载的谷歌地图的API。
下面的示例使用在window.onload加载谷歌地图API页面完全加载后。
该loadScript()函数创建谷歌地图API <script>标记。 此外，回调=初始化参数被添加到执行该网址的端initialize()函数之后的API是满载：
例
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
试一试» 多地图
下面的例子定义了一个网页（四张地图用不同的地图类型）4种地图：
例
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
试一试» 谷歌API密钥
谷歌可以让你的网站调用任何谷歌的API，每天多万次。
如果您打算较重的交通，你应该得到来自谷歌的免费API密钥。
去https://console.developers.google.com得到一个免费的关键。
谷歌地图希望能够找到在加载API时的关键参数的API密钥：
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>