google map 示例-CSDN博客

代码

"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 Maps JavaScript API Exampletitle>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALZrWbwv15xcW6o6Rz2I9OBT8BhQlyUVBQhI7yb8dqdkP7sHdrRTkgtKBUMAsHSYcx-k3lrwvWHbe9w"
type="text/javascript">script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
// Create a base icon for all of our markers that specifies the shadow, icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
// map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
//map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(106.083984375,36.94989178681327),13);
// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="122.141"/>
// <marker lat="37.322" lng="121.213"/>
// markers>
var request = GXmlHttp.create();
request.open("GET", "http://www.step1.cn/GoogleAPI/map/data.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
parseFloat(markers[i].getAttribute("lat")));
var marker = createMarker(point,i);
map.addOverlay(marker);
}
}
}
request.send(null);
// Creates a marker whose info window displays the given number
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class from above
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = new GIcon(baseIcon);
icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
var marker = new GMarker(point, icon);
// Show this marker's index in the info window when it is clicked
var html = "Marker " + letter + "b>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 1; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = createMarker(point, i + 1);
map.addOverlay(marker);
}
// Add a polyline with 4 random points. Sort the points by longitude so that
// the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));
var polyline = new GPolyline([new GPoint(116.1419, 37.4419),
new GPoint(122.1519, 40.4519)],
"#ff0000", 10);
map.addOverlay(polyline);
}//end if
} //end load()
script>
head>
<body onload="load()" onunload="GUnload()">
<div id="message">div>
<div id="map" style="width: 750px; height: 550px">div>
body>
html>