Follow Fang!: Google Maps API 自定義標記圖示

2013/08/15

Google Maps API 自定義標記圖示

『Google Maps API 標記』這篇寫完之後，又學習到使用Google提供的小圖示或是自定義圖示去顯示在地圖上。

底下的是Google提供的符號樣式，只會挑『google.maps.SymbolPath.CIRCLE』以及『google.maps.SymbolPath.BACKWARD_CLOSED_ARROW』來作為示範

名稱	說明
`google.maps.SymbolPath.CIRCLE`
`google.maps.SymbolPath.BACKWARD_CLOSED_ARROW`
`google.maps.SymbolPath.FORWARD_CLOSED_ARROW`
`google.maps.SymbolPath.BACKWARD_OPEN_ARROW`
`google.maps.SymbolPath.FORWARD_OPEN_ARROW`

HTML：

<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <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>
      <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map { height: 95% ; width: 100% }
          #address { width:40%  }  
      </style>
  </head>
  <body onload = "initialize()" >
    <div id="map"></div>
      <div id = "panel">
        <label>地址：</label>
        <input id="address" value="高雄市燕巢區橫山路59號">
        <button onclick="btnClick()">標記</button>
      </div>
  </body>
</html>

JavaScript：

var map;
 
function initialize() {
  
     var mapOptions = {
         zoom: 15,
         center: new google.maps.LatLng(22.76758770, 120.37921390),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
  
     map = new google.maps.Map(document.getElementById("map"),
                   mapOptions);
};
  
 function btnClick(){
     if (address.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 mySymbol =
                     {
                         path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                         scale: 5,
                         fillOpacity: 0.0
                     };

                     var marker = new google.maps.Marker({
                         position: location,
                         map: map,
                         icon: mySymbol
                     });

                 }
                 else
                 {
                     alert("沒有地圖資料");
                 }
             },
             error: function ()
             {
                 alert("資料錯誤");
             }
         });
     }
};

可以看得到該圓顯示在地圖上，而不是常見的標籤

那我們來換一下標示，用『google.maps.SymbolPath.BACKWARD_CLOSED_ARROW』來顯示，並且旋轉90度

google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

旋轉只要在mySymbol，加入『rotation:90』

var mySymbol =
                     {
                         path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                         scale: 5,
                         fillOpacity: 0.0,
                         rotation: 90
                     };

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