Google Maps JavaScript API – 設定Marker

Hank Chen 的照片

Google MAP API 裡面有不少的功能,我們常見的就是 Marker 的應用,例如:
我們上網查詢某個店家,往往下面都會附上店家的 google map 的店址與 Marker,點擊後還會出現店家資訊,這次就以設定單個或多個 Marker 來簡單的介紹

單一 Marker

範例程式碼如下,內含程式碼說明
參考網址: https://developers.google.com/maps/documentation/javascript/examples/map-rtl?hl=zh-tw

<!DOCTYPEhtml>
<html>
<head>
<title>單一Marker</title>
<metacharset="utf-8">
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
      }
</style>
<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&language=zh_TW"></script>
<!-- 上述的url參數,v=3.exp,表示為api版本代號;language=zh_TW,表示設定語系為zh_TW,如要簡體就設定
zh_CN -->
<script>
function initialize() {
var mapOptions = {
    panControl: true, //要不要出現可以上下左右移動的面板,如圖1
    zoomControl: true, //要不要出現可以放大縮小的面板,如圖3
    mapTypeControl: true, //切換地圖檢視類型的面板,如圖4
    scaleControl: true, //比例尺資訊,如圖5
    streetViewControl: true,  //顯示街景服務的面板,如圖2
    overviewMapControl: true, //總覽圖的面板,在右下力有個開合的圖示,如圖6
    center: new google.maps.LatLng(25.048215, 121.517123), //台北車站的經度,緯度
    zoom: 17 //縮放的大小,0-18,0最小,18最大
  };
var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
//產生marker,如圖7
var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter()
  });
var infowindow = new google.maps.InfoWindow();
  infowindow.setContent('<b>台北車站<b>');
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<divid="map-canvas"style="width:90%; height:90%"></div>
</body>
</html>

多個 Marker - 例1

範例程式碼如下,內含程式碼說明
參考網址: https://developers.google.com/maps/documentation/javascript/examples/event-closure?hl=zh-tw

<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="initial-scale=1.0, user-scalable=no">
<metacharset="utf-8">
<title>多個Marker</title>
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
      }
</style>
<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

// 新增三個點
var taipeiStation = new google.maps.LatLng(25.048079, 121.517080);//台北車站
var banqiaoStation = new google.maps.LatLng(25.014304, 121.463782);//板橋車站
var wanhuaStation = new google.maps.LatLng(25.033631, 121.500264);//萬華車站

// 檢視範圍:輸入上述三個點,地圖載入時,會自動呈現適當的檢視範圍
var bounds = new google.maps.LatLngBounds( );
bounds.extend(taipeiStation);
bounds.extend(wanhuaStation);
bounds.extend(banqiaoStation);
map.fitBounds(bounds);

// 加上marker和點擊時的訊息視窗
var taipeiMarker = new google.maps.Marker({
position: taipeiStation,
map: map
});
var banqiaoMarker = new google.maps.Marker({
position: banqiaoStation,
map: map
});
var wanhuaMarker = new google.maps.Marker({
position: wanhuaStation,
map: map
});
attachSecretMessage(taipeiMarker, 0);
attachSecretMessage(wanhuaMarker, 1);
attachSecretMessage(banqiaoMarker, 2);
}

function attachSecretMessage(marker, num) {
var message = ['台北車站<br>Taipei Station', '萬華車站<br>Wanhua Station', '板橋車站<br>
Banqiao Station'];
var infowindow = new google.maps.InfoWindow({
content: message[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<divid="map-canvas"style="width:90%; height:90%"></div>
</body>
</html>

多個 Marker - 例2

本例是上述例子的進階,或許會認為如何得知三個車站的經緯度,沒關係,用地址跟地標名稱也行,範例程式碼如下,內含程式碼說明,效果是會同上例的範例圖
參考網址: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="initial-scale=1.0, user-scalable=no">
<metacharset="utf-8">
<title>多個Marker</title>
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
      }
</style>
<scripttype='text/javascript'src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js'></script>
<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var message = ['台北車站', '萬華車站', '新北市板橋區縣民大道二段7號'];//新增三個車站字串,這裡也可
替換成地址, 板橋車站就把它換成地址
var markerContent = ['台北車站<br>Taipei Station', '萬華車站<br>Wanhua Station', '板橋車站<br>
Banqiao Station'];
var bounds = new google.maps.LatLngBounds( );
var geocoder;
var map ;

function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//依序三個車站marker繪製
$.each(message, function( index, value ) {
codeAddress(value,index)
});
}

function codeAddress(address,i) {
//取得車站的經緯度,並繪制地圖
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
bounds.extend(results[0].geometry.location);//將此座標納入檢視範圍
attachSecretMessage(marker, i);//增加marker
map.fitBounds(bounds);//調整檢視範圍
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

function attachSecretMessage(marker, num) {
var infowindow = new google.maps.InfoWindow({
content: markerContent[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<divid="map-canvas"style="width:90%; height:90%"></div>
</body>
</html>

最後使用前還請先閱讀「Google 地圖」/「Google 地球」附加服務條款
http://www.google.com/intl/zh-TW_US/help/terms_maps.html