Google Maps API 使用示範

Google Maps's Logo
相信各位都使用過 Google Maps 網上地圖服務。其實,Google 提供了 Maps API,讓程式開發者將地圖嵌入於網站或程式中。本文將以 Google Maps API v3 作示範。

載入 API 檔案

示範檔案1
請於 <head> 標籤內加入以下程式碼,以載入 Google Maps API 檔案:

1
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

及:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    function initialize() {
        var latlng_x = 22.308791;
        var latlng_y = 114.161682;
        var latlng = new google.maps.LatLng(latlng_x , latlng_y );
 
        var myOptions = {
            zoom: 11,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
</script>
<script type="text/javascript">
	function initialize() {
		var latlng_x = 22.308791;
		var latlng_y = 114.161682;
		var latlng = new google.maps.LatLng(latlng_x , latlng_y );

		var myOptions = {
			zoom: 11,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}
</script>

並於 <body> 標籤內加入:

1
<div id="map_canvas" style="width:500px; height:500px;"></div>
<div id="map_canvas" style="width:500px; height:500px;"></div>

在以上三段程式碼中,您可以透過修改 latlng_xlatlng_y 這兩個變數(經緯度),以改變地圖載入的位置。此外,您亦可修改 myOptions 中的子變數 zoom,改變地圖載入時的放大倍數。

提示

緊記為 <div id="map_canvas"> 標籤設定寬度及高度,否則 Google Maps API 可能無法正常運作。

加入標記及資訊窗

示範檔案2 於地圖上加入標記及資訊窗

如右圖所示,您可以於地圖上指定的地方加上標記,並加上資訊窗作說明。

請於 JavaScript 之 initialize() 函式中加入以下程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Information Box Content
var InfoBoxContent = '<div id="infoboxcontent"><h1>Hello World!</h1><p>Example by <a href="http://g-hk.org">G-HK.ORG</a></p></div>';
var InfoBox = new google.maps.InfoWindow({
    content: InfoBoxContent
});
 
// Marker
var marker_latlng = new google.maps.LatLng(22.308791, 114.161682);
var marker = new google.maps.Marker({
    position: marker_latlng,
    map: map,
    title:"Hello World!"
});
 
// Click marker to open information box
google.maps.event.addListener(marker, 'click', function() {
    InfoBox.open(map, marker);
});
// Information Box Content
var InfoBoxContent = '<div id="infoboxcontent"><h1>Hello World!</h1><p>Example by <a href="http://g-hk.org">G-HK.ORG</a></p></div>';
var InfoBox = new google.maps.InfoWindow({
	content: InfoBoxContent
});

// Marker
var marker_latlng = new google.maps.LatLng(22.308791, 114.161682);
var marker = new google.maps.Marker({
	position: marker_latlng,
	map: map,
	title:"Hello World!"
});

// Click marker to open information box
google.maps.event.addListener(marker, 'click', function() {
	InfoBox.open(map, marker);
});
This entry was posted in 網頁程式 and tagged , , , . Bookmark the permalink.

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">