最近參與的一個專案，客戶希望新增加一個功能，要把廠商的位置顯示在google map上。終於有機會可以來試試google map api。
首先先去 http://code.google.com/apis/maps/signup.html 申請一組api key，這組key只能用在你設定網站上面。
key產生之後，還有一個簡單的sample code可以參考，複製貼上後，我的第一個map就產生了，真是方便。
<!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=your api key"
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="width: 500px; height: 300px"></div>
</body>
</html>
接下來用這個sample來做一下延伸
map.addControl(new GLargeMapControl()); //加入地圖縮放工具
map.addControl(new GMapTypeControl()); //加入地圖切換的工具
map.addMapType(G_PHYSICAL_MAP); //加入地形圖
map.setCenter(new GLatLng(25.001689, 121.460809), 8); //設定台灣
修改一下google提供的範例http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html，加入最大化訊息視窗的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>Geocoding</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=your api key"
type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var marker;
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl()); //加入地圖縮放工具
map.addControl(new GMapTypeControl()); //加入地圖切換的工具
map.addMapType(G_PHYSICAL_MAP); //加入地形圖
map.setCenter(new GLatLng(25.001689, 121.460809), 8); //設定台灣為中心點
geocoder = new GClientGeocoder();
}
}
function createMarker(point,title,html)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(
html,
{
maxContent: html,
maxTitle: title}
);
});
return marker;
}
function showAddress(address)
{
if (geocoder)
{
geocoder.getLatLng(
address,
function(point)
{
if (!point)
{
alert(address + " not found");
}
else
{
if(marker) //移除上一個點
{
map.removeOverlay(marker);
}
map.setCenter(point, 13);
var title = "地址";
marker = createMarker(point,title,address);
map.addOverlay(marker);
marker.openInfoWindowHtml(
address,
{
maxContent: address,
maxTitle: title}
);
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="台北市中正區重慶南路1段122號" />
<input type="submit" value="Go!" />
</p>
<div id="map" style="width: 500px; height: 300px">
</div>
</form>
</body>
</html>
大約花了一個下午的時間，就完成了這個需求，看文件花的時間比較多一些。
範例連結
2008/1/25 18:01|
閱讀數 : 32817
|
4 人收藏
我要推薦
|
|
文章分類:
map
訂閱
