Follow Fang!: Google Maps API 標記

繼上次這篇『Google Geocoding API 透過地址查詢經緯度』，最近又要開始找房子
可是我又不太想每次都上去Google Maps，所以就來研究一下『疊加層』

我直接引用疊加層的說明，所謂的「疊加層」是地圖上繫結到特定經緯度座標的物件，因此在拖曳或縮放地圖時會跟著移動。「疊加層」會反映您在地圖中「加入」的物件 (用以指派點、線條、區域或物件集)。

Maps API 提供數種疊加層類型：

地圖上的單一位置是用標記顯示，標記有時會顯示自訂圖示圖片，在此情況下，標記通常會改稱為「圖示」。標記和圖示是 Marker 類型的物件 (詳情請參閱下方的標記和圖示)。
地圖上的線條則是用折線 (代表一連串依序排列的位置) 顯示。線條是 Polyline 類型的物件 (詳情請參閱折線)。
地圖上的區域如果是任意形狀，就會顯示為多邊形，與折線類似。多邊形與折線相似，都是由一連串依序排列的位置所組成；其與折線不同之處在於，多邊形定義的是它封閉起來的區域 (詳情請參閱下方的多邊形)。
地圖圖層可用疊加層地圖類型顯示。如要建立自己的地圖方塊集，您可以建立自訂地圖類型來取代基本地圖方塊集，或以疊加層的形式顯示在現有基本地圖方塊集上方 (詳情請參閱自訂地圖類型)。
資訊視窗也是一種特殊的疊加層，可以在地圖上方指定位置的氣球式彈出視窗內顯示內容 (通常是文字或圖片，詳情請參閱資訊視窗)。
您也可以實作自己的自訂疊加層。自訂疊加層需實作 OverlayView 介面(詳情請參閱自訂疊加層)。

如果還沒有玩過Google Maps API的人，建議可以先去參考我之前寫得『Google Geocoding API 透過地址查詢經緯度』。因為是從之前那篇延伸過來的，也沒有加入太多東西

這個程式碼我主要多在JavaScript內中加入了

if (myMarker)
                     {
                         for (index in myMarker)
                         {
                             myMarker[index].setMap(map);
                         }
                     }

判斷myMarker是否為空，如果不為空，則將標記標注在地圖上。
不過這樣寫是會造成疊加層重複疊加，所以需要的人可能要改一下
我只是為了方便而已XDD

HTML：

<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css"  href="StyleSheet.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=Key Number&sensor=false&region=zh-tw"></script>
    <script type="text/javascript" src="./Script.js"></script>
  </head>
  <body onload = "initialize()" >
    <div id="map"></div>
      <div id = "panel">
        <label>地址：</label>
        <input id="address" value="高雄市燕巢區橫山路59號">
        <label>學苑名稱</label>
        <input id="house" value="樹德科技大學">
        <button onclick="btnClick()">標記</button>
      </div>
  </body>
</html>

JavaScript：

var map;
var myMarker = [];

function initialize() {
 
     var mapOptions = {
         zoom: 15,
         center: new google.maps.LatLng(22.63961980, 120.30211060),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
 
     map = new google.maps.Map(document.getElementById("map"),
                   mapOptions);
};
 
 function btnClick(){
     if (address.value.length >= 1 && house.value.length >= 1)
     {
         $.ajax({
             type: "post",
             dataType: "json",
             url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address.value + "&sensor=false&language=zh-tw",
             success: function (data)
             {

                 if (data.status == "OK")
                 {

                     var location = new google.maps.LatLng(data.results[0].geometry.location.lat,
                      data.results[0].geometry.location.lng);

                     var mapOptions = {
                         zoom: 16,
                         center: location,
                         mapTypeId: google.maps.MapTypeId.ROADMAP
                     }

                     map = new google.maps.Map(document.getElementById("map"),
                   mapOptions);

                     var marker = new google.maps.Marker({
                         position: location,
                         map: map,
                         title: house.value
                     });

                     myMarker.push(marker);

                     if (myMarker)
                     {
                         for (index in myMarker)
                         {
                             myMarker[index].setMap(map);
                         }
                     }

                 }
                 else
                 {
                     alert("沒有地圖資料");
                 }
             },
             error: function ()
             {
                 alert("資料錯誤");
             }
         });
     }
     else
     {
         alert("請確認地址或學苑名稱有正確輸入");
         document.getElementById('#address').focus();
     }
};

CSS：

   html { height: 100% }
   body { height: 100%; margin: 0; padding: 0 }
   #map { height: 90% }
   #panel { height: 5% }

參考資料：
https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-tw

2013/08/14

Google Maps API 標記