api参考地址：http://www.codechina.org/doc/google/gmapapi/
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/demogallery.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 JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAANBnkO8F66DkFfXFSXsGy5RRlhMm9Qf438FJMaqr4Q83fhP-jqBQl-w08zRkw0bnveDIJ3yTYbnTt3Q"
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=" 500px; height: 300px"></div>
</body>
</html>
"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=ABQIAAAANBnkO8F66DkFfXFSXsGy5RRlhMm9Qf438FJMaqr4Q83fhP-jqBQl-w08zRkw0bnveDIJ3yTYbnTt3Q"
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=" 500px; height: 300px"></div>
</body>
</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 µØÍŒ JavaScript API ÊŸÀý</title>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style=" 500px; height: 300px"></div>
</body>
</html>
"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 µØÍŒ JavaScript API ÊŸÀý</title>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style=" 500px; height: 300px"></div>
</body>
</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 µØÍŒ JavaScript API ÊŸÀý</title>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
GEvent.addListener(map, "zoomend", function() {
document.getElementById("message").innerHTML = map.getZoom();
});
map.setCenter(new GLatLng(39.917, 116.397), 14);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style=" 500px; height: 300px"></div>
<br/>
<div id="message"></div>
</body>
</html>
"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 µØÍŒ JavaScript API ÊŸÀý</title>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
GEvent.addListener(map, "zoomend", function() {
document.getElementById("message").innerHTML = map.getZoom();
});
map.setCenter(new GLatLng(39.917, 116.397), 14);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style=" 500px; height: 300px"></div>
<br/>
<div id="message"></div>
</body>
</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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google µØÍŒ JavaScript API ÊŸÀý</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(39.917, 116.397), 14);
// Ëæ»úµØÔÚµØÍŒÉÏÌíŒÓ 10 žö±ê×¢
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
// ÌíŒÓÒ»žöÓÉ 5 žöËæ»úµãÁ¬³ÉµÄÕÛÏߣ¬°ÑËæ»úµã°ŽÆ䟶ÈÅÅÐòÒÔ±ÜÃâÕÛÏßÏàœ»
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style=" 500px; height: 300px"></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google µØÍŒ JavaScript API ÊŸÀý</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://ditu.google.com/maps?file=api&v=2"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(39.917, 116.397), 14);
// Ëæ»úµØÔÚµØÍŒÉÏÌíŒÓ 10 žö±ê×¢
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
// ÌíŒÓÒ»žöÓÉ 5 žöËæ»úµãÁ¬³ÉµÄÕÛÏߣ¬°ÑËæ»úµã°ŽÆ䟶ÈÅÅÐòÒÔ±ÜÃâÕÛÏßÏàœ»
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style=" 500px; height: 300px"></div>
</body>
</html>