Google Maps JavaScript API可以讓您在自己的網頁上使用Google地圖.在使用API之前，您應該先申請一
個API key,申請API key請到：http://code.google.com/apis/maps/signup.html。這里假設你獲取到的key是：ABQIAA。
關于jquery的獲取不再此處累贅，網上有許多關于jquery的介紹。
接著我們就使用JQuery和Google Maps JavaScript API來結合表現一下google map的有趣的地圖效果，進而達到熟悉Google Maps JavaScript API的目標。
先來個HelloChina:
(1)在html文件中編寫html代碼:
map.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps 與 JQuery結合使用</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="map.js"></script>
</head>
<body>
<div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div>
<div id="message"></div>
</body>
</html>
(2)在js文件中編寫js代碼
map.js
$(document).ready(function()
{
//檢查瀏覽器兼容性
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.94, 106.08), 4);//中國的經緯度以及地方放大倍數
map.setMapType(G_SATELLITE_MAP);
//document卸載時觸發
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
(3)在地址欄輸入頁面對應的地址(確定key是和你輸入地址或域名匹配的),查看效果圖，可以看到中國位于地圖的中央。
HolloChina的效果圖
地圖的移動和變換
（1）修改javascript代碼如下：
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.94, 106.08), 4);
//4秒后移動
window.setTimeout(function() {
map.panTo(new GLatLng(35.746512259918504,78.90625));
}, 4000);
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
（2）輸入對應的地址查看，等上4秒鐘，就可以看到地圖的中心移動到中國的西部(大概的位置)：
地圖中心移動到中國的西部
添加控件并修改地圖類型
修改javascript代碼如下：
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//小型伸縮控制器
map.addControl(new GSmallMapControl());
//地圖類型控制器
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.94,106.08),4);
//將地圖設置為衛星地圖
map.setMapType(G_SATELLITE_MAP);//修改地圖類型
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
刷新頁面，看到的效果是衛星地圖的左上角有一個小的伸縮控件，右上角是地圖選擇的控件
加入控件后的效果圖
添加事件監聽器并開啟滾輪伸縮效果
修改javascript代碼：
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開啟滾輪伸縮效果－－鼠標滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
//添加moveend事件監聽器
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
//在這個DIV中顯示地圖中心的經緯度
$('#message').text(center.toString());
});
map.setCenter(new GLatLng(36.94,106.08),4);
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
此時的地圖在滾動滾輪的時候會發生伸縮，而拖動完地圖后，地圖左側的坐標信息會跟著變。
添加事件監聽器和滾輪伸縮的效果圖
后兩篇：
[javascript]google map api 與jquery結合使用(2) --標注,浮窗
[javascript]google map api 與jquery結合使用(3) --圖標樣式,使用xml和異步請求
Let life be beautiful like summer flowers and death like autumn leaves.