如何制作自己的第一个google地图样例源码详细介绍
以下为一个完整的html文件源码,初学者可以直接保存到本地进行测试，建议初学者分三步来学习谷歌地图
1、找样例看源码和效果。
2、找工具文章，试着自己改改 http://hi.baidu.com/zgq666/blog/item/0faf9f13b5fa688b6438db2a.html。
3、 查官方接口文档，设计自己的应用 http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.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>
<!--以下引用谷歌地图时,需要提交一个API key,具体见 http://hi.baidu.com/942826708/blog/item/4d1d47d298c740cf562c844c.html -->
<script
src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
<!--工具文章请参考 http://hi.baidu.com/zgq666/blog/item/0faf9f13b5fa688b6438db2a.html-->
<!--官方接口请参考http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html -->
var map;
var geocoder;
var address;
function initialize() {
if (GBrowserIsCompatible()) {
var options = {
listingTypes : "kmlonly"
};//设置地图的大小,加载的地图类型默认第一个,
var options = {size:new GSize(1200, 700),mapTypes:[G_SATELLITE_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP]};
//map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(1200,700), mapTypes:[G_SATELLITE_MAP,G_NORMAL_MAP,G_PHYSICAL_MAP]} );
map = new GMap2(document.getElementById("map_canvas"),options);
map.disableGoogleBar();//禁用谷歌搜索栏
map.setCenter(new GLatLng(39.992911,116.396463), 16);//设置坐标和放大倍数
//这里点击显示地址
map.addControl(new GSmallMapControl());
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
var customUI = map.getDefaultUI();
customUI.maptypes.hybrid = true;
map.setUI(customUI);
//map.enableGoogleBar();
}
}
function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
function showAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("你点击的这个地方还没有准确地址!"+"状态码（Status Code）:" + response.Status.code);
} else {
//alert(response.responseText);
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
'<div style="font-size:13px;">' +
'<b>当前点击的地址:</b><br/>' + place.address + '<br/>' +
'<b>坐标：</b>'+place.Point.coordinates[1]+' '+place.Point.coordinates[0]+'<br/>' +
'<b>准确度:</b>' + place.AddressDetails.Accuracy + ' ' +
'<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode) +
'</div>';
}
}
//地理位置解析***********************************************************************************************
function $(id){return document.getElementById(id);}
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("不能解析这个地址");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(getGeocodeHtml(response));
}
}
function getGeocodeHtml(response){
var html = "<div style='font-size:13px'>";
html += "<b>搜索目标：</b>"+response.name;
// html += "<br/><b>结果状态：</b>"+response.Status.code;
if(response.Placemark){
for (var i = 0, place; place = response.Placemark[i]; i++) {
//var s="";for(var elem in place.Point.coordinates)
//s+=elem+":"+place[elem]+"\n";
//alert(s);
html += "<br/><b>地址：</b>"+place.address;
if(place.AddressDetails.Country)html += "<br/><b>国家代码：</b>"+place.AddressDetails.Country.CountryNameCode;
html += "<br/><b>准确度：</b>"+place.AddressDetails.Accuracy;
html += "<br/><b>坐标：</b>"+place.Point.coordinates[1]+" "+place.Point.coordinates[0];
}
}
html += "</div>";
return html;
}
function showLocation() {
var address = $("q").value;
geocoder.getLocations(address, addAddressToMap);
}
function findLocation(address) {
$("q").value = address;
showLocation();
updateURL();
}
//地理位置解析***********************************************************************************************
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 800px; height: 600px; float: left"></div>
<div>
<b>目标地址/坐标：</b> <input type="text" id="q"
value="请输入您要搜索的位置 如: 北京市 鸟巢" class="address_input" size="42" /> <input
type="button" value="搜索" onclick="showLocation();" />
</div>
</body>
</html>