創建一個基本的谷歌地圖
這個例子創建一個谷歌地圖在英國倫敦為中心的：
例
<!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>