資料來源:
http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
多個坐標, 就要透過 google map API 來呼叫, 才能使用, 用法也很簡單, html 範例如下:
<script src="http://maps.google.com/maps/api/js?sensor=false&language=zh_TW" type="text/javascript"></script>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
title: locations[i][0],
zIndex: locations[i][3],
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
套出來的畫面如下:
說明1: 原來的範例裡的 marker, 沒有加 title, 所以滑鼠移過去時(onMouseOver) 不會顯示出 坐標的名稱(Title), 上面的code 裡, 已經有加 title 進去 market 裡.
說明2: sensor=false&language=zh_TW, 代表要使用繁體中文介面, 沒加的話browser 會挑戰去偵測目前使用的語系, 有可能會猜錯.
如果想要換 marker 的 icon image 的話, 可以試試看下面的範例:
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, beaches);
}
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
initialize();
</script>
最後完成的asp sample code 如下:
'// google map API.
Response.Write("<script src=""http://maps.google.com/maps/api/js?sensor=false&language=zh_TW"" type=""text/javascript""></script>"&vbCrLf)
Response.Write("<script type=""text/javascript"">"&vbCrLf)
Response.Write("function initialize_map(map_id, locations) {"&vbCrLf)
Response.Write(" var map = new google.maps.Map(document.getElementById(map_id), {"&vbCrLf)
Response.Write(" zoom: 10,"&vbCrLf)
Response.Write(" center: new google.maps.LatLng(locations[0][1], locations[0][2]),"&vbCrLf)
Response.Write(" mapTypeId: google.maps.MapTypeId.ROADMAP"&vbCrLf)
Response.Write(" });"&vbCrLf)
Response.Write(" var infowindow = new google.maps.InfoWindow();"&vbCrLf)
Response.Write(" var marker, i;"&vbCrLf)
Response.Write(" for (i = 0; i < locations.length; i++) { "&vbCrLf)
Response.Write(" marker = new google.maps.Marker({"&vbCrLf)
Response.Write(" position: new google.maps.LatLng(locations[i][1], locations[i][2]),"&vbCrLf)
Response.Write(" title: locations[i][0],"&vbCrLf)
Response.Write(" zIndex: locations[i][3],"&vbCrLf)
Response.Write(" map: map"&vbCrLf)
Response.Write(" });"&vbCrLf)
Response.Write(" "&vbCrLf)
Response.Write(" google.maps.event.addListener(marker, 'click', (function(marker, i) {"&vbCrLf)
Response.Write(" return function() {"&vbCrLf)
Response.Write(" infowindow.setContent(locations[i][0]);"&vbCrLf)
Response.Write(" infowindow.open(map, marker);"&vbCrLf)
Response.Write(" }"&vbCrLf)
Response.Write(" })(marker, i));"&vbCrLf)
Response.Write(" }"&vbCrLf)
Response.Write("}"&vbCrLf)
Response.Write("</script>"&vbCrLf)
dim Index
Index = 0
do
Index = Index + 1
Set RsDetail = Server.CreateObject("ADODB.RecordSet")
RsDetail.open SqlDetail, conn, 1, 1
Response.Write "<h4>" & trim("" & myRS("Title")) & "</h4>" & vbCrLf
if not RsDetail.eof then
Response.Write "<div class='map'>"
Response.Write("<h4>【"& server.htmlencode(trim("" & myRS("Subject"))) &"】</h4>"&vbCrLf)
Response.Write "<div id='map_canvas_"& Index &"' style='width: 600px; height: 400px;'></div>"
Response.Write "</div>"&vbCrLf
Response.Write("<script type=""text/javascript"">"&vbCrLf)
Response.Write("var locations_"& Index &" = ["&vbCrLf)
dim detailIndex
detailIndex = 0
do
detailIndex = detailIndex + 1
dim DetailLongitude
dim DetailLatitude
dim DetailName
DetailName = trim("" & rsDetail("DetailName"))
DetailLongitude = trim("" & rsDetail("DetailLongitude"))
DetailLatitude = trim("" & rsDetail("DetailLatitude"))
Response.Write "['"& DetailName &"', "& DetailLatitude &", "& DetailLongitude &", "& detailIndex &"]"
RsDetail.movenext
if RsDetail.eof then
exit do
end if
Response.Write ","
loop
Response.Write("];"&vbCrLf)
'// delay 1 second to show each google map.
Response.Write("setTimeout(""initialize_map('map_canvas_"& Index &"', locations_"& Index &");"", "& (clng(Index) * 1000)+3000 &");"&vbCrLf)
Response.Write("</script>"&vbCrLf)
RsDetail.movefirst
end if
myRS.movenext
if myRS.eof then
exit do
end if
loop
