淺嘗 Google Map API

Google Map 是一個很好用的東西, 大人愛用小孩也愛用.

當然如果要用 Google Map 做出地理指標的圖, 我們也可以很簡單的達成, 只要使用 Google 提供的 API 就可以惹!

要使用 Google API 之前, 您必需先到 http://code.google.com/intl/zh-TW/apis/maps/signup.html 申請一個你的 API Key, 然後再套用就可以了.

以下, 為簡單的從 地址 找 地圖範例:

在 <head></head> 中加入以下 Code

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://maps.google.com/maps?file=api&v=3&key=YOUR_GOOGLE_MAP_API_KEY_STRING" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	show_map();
});

function show_map()
{
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		var geocoder = new GClientGeocoder();
		map.addControl(new GSmallMapControl());
		var address = $("input[id=address]").val();
		geocoder.getLatLng(address, function(point) {
			if (!point) {
					alert('Google Maps 找不到該地址,無法顯示地圖!');
			} else {
				map.setCenter(point, 13);
				var marker = new GMarker(point);
				map.addOverlay(marker);
				marker.openInfoWindowHtml(address);
			}
		});
	}
}
</script>

然後在 中插入如下的 HTML 物件, 包含一個 500px x 500px 的地圖顯示區, 一個輸入區和一個查尋按鈕

<div id="map" style="width: 500px; height: 500px"></div>
<input type="text" id="address" value="台北火車站" />
<input type="button" onClick="show_map();" value="查尋" />

然後, 這樣就可以用地址查出地圖所在位置了 !

Comments are closed.

十月 2019
« 五月    
 123456
78910111213
14151617181920
21222324252627
28293031  

Google ADs