相信各位都使用過 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_x 及 latlng_y 這兩個變數(經緯度)，以改變地圖載入的位置。此外，您亦可修改 myOptions 中的子變數 zoom，改變地圖載入時的放大倍數。
提示
緊記為 <div id="map_canvas"> 標籤設定寬度及高度，否則 Google Maps API 可能無法正常運作。
API 參考
加入標記及資訊窗
如右圖所示，您可以於地圖上指定的地方加上標記，並加上資訊窗作說明。
請於 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);
});API 參考
- google.maps.InfoWindow : http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/reference.html#InfoWindow
- google.maps.Marker : http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/reference.html#Marker
- google.maps.event.addListener : http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/reference.html#MapsEventListener