Fei's life in Pudong! » 日志 » Google Map 实战No.1
Google Map 实战No.1
小飞 发表于 2008-07-04 09:55:07
Google Map 做为Mashup 很多基础功能的---地理位置功能,真的是很不错的选择,而且是免费的,废话不多说现在就开始Google Map之旅。 学习成本 :时间3个小时,有一定Javascript基础先。
参考文档:http://code.google.com/intl/zh-CN/apis/ajax/documentation/
不过我去亲生实践了一遍。
1.注册一个Key。比如:
ABQIAAAAVFAqC4OG8kE4baRrKrQFLBQAP-dcpmgyC0ZkWidKAzoSzTYB4xTwSdfEs0UTZ8_21GZp9I38XdpMLg
For http://www.swaplism.com/
2.加载Google的JS和使用这个KEY ,这段代码就在ID为Map的区域画了一个 500*300地方
"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 JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAVFAqC4OG8kE4baRrKrQFLBQAP-dcpmgyC0ZkWidKAzoSzTYB4xTwSdfEs0UTZ8_21GZp9I38XdpMLg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
