一段經過精簡的代碼：
<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>
< body>
<div id="mapContainer" style="height:400px; width:400px;"></div>
< /body>
< script type="text/javascript">
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(33.0, 106.0), 3);
< /script>
新建一個空白的文本文件，把上面這段代碼copy過去，不要改變代碼的任何順序，然後把這個文本文件保存爲html文件，使用瀏覽器打開（不要使用MS的IE），看看你能看到什麼！
對這段代碼的詳細解釋
上面的這段代碼就是創建一個地圖的核心步驟：
1、導入地圖API類庫。
<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>
注意這裏的參數key，我在以前的文章裏已經詳細解釋過了，如果你只是在本地運行，暫時可以不用管它。
2、在頁面的body元素中定義一個地圖容器。
<body>
<div id="mapContainer" style="height:400px; width:400px;"></div>
</body>
這個地圖容器一般使用div元素來定義，如果你願意，使用p元素或者其他你能想到的元素都可以，但是都應該是塊元素，並且必須定義它的id，保證在後面的步驟裏能夠通過document.getElementById找到這個元素。
容器的style屬性在這裏是用來定義這個容器的大小，從而決定所顯示地圖的大小，當然，如果你在這裏不定義也可以通過其他的手段來達到目的，這裏暫且先認爲這個style的定義和id屬性一樣也是必不可少的吧。
其實body元素在這裏也有一些特殊的作用，就是保證下一步驟在頁面的html元素全部加載結束後再執行，詳細的理論就不細說了。
3、定義你自己的script區域，在裏面new一個GMap2對象，並且指定其顯示所需的兩個基本要素：中心、縮放層次。
<script type="text/javascript">
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(33.0, 106.0), 3);
</script>
這裏的GMap2是谷歌地圖API中最重要的核心類，對應在頁面上顯示的地圖，所有對地圖的操作都需要在已經創建（new）了GMap2對象的基礎上才能夠進行。在調用GMap2構造函數是使用的參數就是在上一步定義的地圖容器，DOM對象，使用document.getElementById獲取。
要在頁面上正常顯示地圖，僅僅調用GMap2類的構造函數創建一個GMap2對象還不夠，你還需要指定這個GMap2對象的中心，通常也順便指定它的縮放層次，否則就會默認顯示縮放層次爲0。
要指定新創建地圖的中心，需要使用地圖API裏面定義的另一個常用類GLatLng，可以把這個類簡單的認爲是對地理座標的封裝類，構造函數中第一個參數是南北向的緯度，第二個參數是東西向的經度。
調用GMap2的setCenter方法設定完地圖的中心和縮放層次，這個地圖就可以正常顯示了。
還需要關心的幾個問題：
上面的示例代碼僅僅是爲了顯示一個試驗性質的簡單地圖，所以把很多暫時不是很必要的代碼都去掉了，如果你需要創建具有很好的兼容性、並且能夠發佈到你自己的網站上的地圖，還需要注意這幾個問題：
1、爲了保證有足夠的兼容性，谷歌建議使用XHTML來定義顯示地圖的html頁面，所以，你需要在這個頁面的頂部聲明XHTML的DOCTYPE，並且在html中聲明XHTML的命名空間
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
當然，最好你自己的頁面代碼也能夠符合XHTML的語法規則。相對我們現在的HTML4.01來說，可以把XHTML語法規則簡單的歸納如下：
html、head、title、body元素一個都不能少，並且只能有html一個root元素；
不要使用簡化的屬性，必須使用“name='value'”的形式；
標籤名和屬性名都用小寫字母，屬性值要用引號括起來；
標籤必須是閉合的，並且不能交叉嵌套；
使用id屬性而不是name屬性來獲取元素；
2、爲了兼容“偉大的”IE瀏覽器，以便能夠在IE中也正確顯示地圖中的折線，需要在html標籤中增加對VML命名空間的聲明
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
這個很容易忽略，導致你在IE裏的折線不能正常顯示，所以把這一點單列出來加以強調。
3、對於通用的瀏覽器兼容性檢查，地圖API提供了一個全局方法GBrowserIsCompatible()來保證地圖API是在它所兼容的瀏覽器裏運行的，這個兼容瀏覽器列表我也沒找到最新的，谷歌文檔裏給出了一個遠古時代的列表，所以不列也罷，對我們目前通用的FireFox、IE、Safari、Opera瀏覽器裏運行地圖API都沒有問題。
這裏只說一下GBrowserIsCompatible()這個方法的使用：
從名字也可以看出，GBrowserIsCompatible()方法返回一個boolean類型的值，所以，把我們對地圖操作的起點放在對這個方法返回值的判斷塊中，形如：
if(GBrowserIsCompatible()){
//開始創建和操作地圖
} else {
//如果有必要，就在這裏定義你對這個異常的處理
}
當然，在你自己的代碼中，針對不同的瀏覽器環境你還是需要自己實現兼容性的代碼，這裏的GBrowserIsCompatible()只是保證地圖API類庫是在它兼容的環境中運行的。
4、註冊你要發佈頁面所在網站的谷歌地圖API密鑰，替換掉示例代碼裏的key，我在這裏詳細解釋過這個密鑰，不多說了。
5、爲了保證你的頁面在任何可用的網絡環境下都能快速加載並且正確顯示，建議定義body元素的onload方法，在onload方法中開始你的JS動作。同時，把讀入地圖API的script標籤放在head元素中，而把你自己的JavaScript代碼塊放到body標籤的後面去定義。如果對瀏覽器的加載順序比較熟悉的話，你就不必遵守我說的規則了，自由定義你認爲應該的JavaScript聲明順序。
6、爲了避免JavaScript中引用頁面的DOM元素可能存在的內存泄漏(尤其是在“偉大的”IE瀏覽器中)，你需要使用地圖API中定義的GUnload()方法作爲你的body元素的onunload方法，並且最好把這個作爲一個必須的規則記住。但是GUnload()方法不是避免內存泄漏的大力丸，所以，你在自己的代碼中還是需要注意避免內存泄漏這個問題。
7、爲了能夠在頁面上正常顯示中文，需要把頁面的字符集定義爲utf-8。
所以，一個完整的應用谷歌地圖API的頁面代碼如下：
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>我的谷歌地圖</title>
<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=YOU_API_KEY" type="text/javascript"></script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
<div id="mapContainer" style="height:400px; width:400px;"></div>
</body>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(33.0, 106.0), 3);
}
}
</script>
</html>
