<!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>
<script src=”http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN” type=”text/javascript”></script>
<script type=”text/javascript”>
function initialize() {
var map = new GMap2(document.getElementById(“map_container”));
map.setCenter(new GLatLng(39.917, 116.397), 14);
map.addControl(new GLargeMapControl()); //添加一个大的方向盘控件
map.addControl(new GScaleControl()); //添加一个缩放级别控件尺寸
map.enableScrollWheelZoom(); //鼠标滑轮缩放地图
map.enableContinuousZoom(); //放大缩小时启用动画效果
map.doubleClickZoomEnabled() //鼠标双击放大地图
map.addControl(new GOverviewMapControl()); //右下角
map.addControl(new GMenuMapTypeControl()); //右上角
new GKeyboardHandler(map); //向地图中添加键盘绑定
/**
* Classic 10 random markers now equipped with bounds
* var markerBounds is a GatLngBounds() that contains the ten markers
*/
//var markerBounds = new GLatLngBounds();
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));
//markerBounds.extend(point);
}
map.addOverlay(new GMarker(new GLatLng(29.45873118535534,113.02734375)));//武汉标记
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_container” style=”width: 800px; height: 600px”></div>
</body>
</html>
方法二.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<head>
<!–
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
–>
<title>Hello Google Earth!</title>
<!– *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** –>
<script src=”http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw”></script>
<script>
google.load(“earth”, “1”);
var ge = null;
function init() {
google.earth.createInstance(“map3d”, initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
</head>
<body onload=’init()’ id=’body’>
<center>
<div>
Hello, Earth!
</div>
<div id=’map3d’ style=’border: 1px solid silver; height: 600px; width: 800px;’></div>
</center>
</body>
</html>