">
<head>
<script src="
http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
//]]>
</script>
</html>
看范例所呈现的结果
Google Maps API 内建四种控件：
GLargeMapControl : 适合给大型地图的控件。
GSmallMapControl : 适合给小型地图的控件。
GSmallZoomControl : 只有 Zoom Level 的调整，没有地图移动控制。
GMapTypeControl : 显示地图型态切换的控件。
至于要用什么控件，你可以依照你所提供的地图大小以及用途而定，每一种都试看看吧。
增加其它信息：Marker，InfoWindow 或是 Polyline
Google Maps API 好玩的地方是在于我们可以在地图上面加很多东西，API 也提供一些基本的组件，包含你可以标示一个点，显示信息，甚至在地图上画线。
GMarker
先看看下面这个范例：
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看范例所呈现的结果
我在这个范例中设立了一个 Marker 标示出京都车站的位置，京都车站经纬度取得的方式如前面所述，最重要的是要新增加一个 GMarker 对象，并将此 Marker 对象加入到 map 对象中。你也可以在地图上标示好几的 Marker，甚至可以用自订的 icon 来标示。
Info Window
除了标示地点外，你也可以在 Marker 上显示额外的信息。
<!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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
GEvent.addListener (KyotoStation, "click", function() {
KyotoStation.openInfoWindowHtml ("日本京都车站");
});
map.addOverlay (KyotoStation);
//]]>
</script>
</html>
看范例所呈现的结果
上面这个程序，在当使用者点了该 Marker 时会出现一个方匡显示你输入的文字，这文字可以是 HTML 格式，也就是说允许上面出现图片等信息。那可不可以不用去等到使用者点了之后才出现，可不可以在加载时就出现呢？好象是不行的，至少我测试的结果都会得到一些错误讯息。不过你可以这样做：
如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:
>>
论坛入口 <<
上一篇：
网页设计中文字颜色的搭配技巧 下一篇：
在网站上实现 Google Reader 一键订阅
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【我要投稿】 【论坛讨论】
