多個景點(坐標), 套google map 的方法

資料來源:
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