google map api与jquery结合使用（1）--控件,监听器

google map api与jquery结合使用（1）--控件,监听器2011-01-30AlexwanGoogle 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&amp;v=2&amp;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！"）;
}
}）;