2015年3月6日 星期五

【Google Maps】(三) 透過地址轉換的經緯度動態產生Google Map靜態地圖

一般而言,在我接到的專案若有地圖需求,而且必須是動態生成地圖情況下,例如,多組地址資料產生N個地圖,一般我都會直接撰寫Google Maps API的程式碼去動態生成地圖,但如果需要動態生成的是靜態地圖該怎麼辦呢?

在一個產生PDF且PDF上需顯示地圖的專案上我就碰到了這個狀況,由於當時我使用的生成PDF套件似乎不吃Javascript,但Google Maps API又是由Javascript撰寫,為此問題困擾了我,好佳在貼心的Google提供了靜態地圖功能!

預先看線上demo請點我



Google Static Maps API使用非常簡單,只需要在<img>標籤中將src屬性設定為Google提供的網址僅可產生靜態地圖,唯須注意網址中的一些參數:

api網址 http://maps.googleapis.com/maps/api/staticmap
參數center 地圖中心設定,由於本範例為地址轉換經緯度才去取得地圖,故此處採用設定經緯度方式,格式為「緯度,經度」
參數zoom 地圖縮放等級
參數size 靜態地圖的尺寸,格式為「水平寬度x垂直高度」,單位為像素
參數maptype 地圖類型
參數markers 增加標記點,詳細規格請看官網說明。
其他詳細參數請點我

本次範例前提需要地址轉換經緯度的觀念,如果還不清楚請先參考【Google Maps】(一) 初始化地圖與透過地址轉換經緯度重新定位地圖位置


本次範例主要程式如下:

 
  function GetAddressPic()
  {
  address = $("#address_val").val();
  geocoder = new google.maps.Geocoder();
  geocoder.geocode(
   {
    'address':address
   },function (results,status) 
   {
   if(status==google.maps.GeocoderStatus.OK) 
   {
       LatLng = results[0].geometry.location;
      
       var mapUrl = "http://maps.googleapis.com/maps/api/staticmap";    
    mapUrl += "?center=" + LatLng.lat() + "," + LatLng.lng();
    mapUrl += "&markers=color:red|label:A|" + LatLng.lat() + "," + LatLng.lng();      
    mapUrl += "&zoom=15&size=640x370&maptype=roadmap&sensor=false";
    
      $("#map_img").html('');
   }
   }
  ); 
  }

上述程式碼中,最後取得的mapUrl即為靜態圖片的圖片網址。

【2017/9/16更新】

最近整理失效的demo連結(換位置啦XD)時發現,Google Maps API已經需要金鑰囉!所以上述img url還需補上key參數喔!至於金鑰如何申請可參考【Youtube】(一)如何申請Youtube Data API v3金鑰?這篇~

如果您喜歡我的分享、或是我的文章對您有幫助的話,希望能到我的粉絲專頁點個讚追蹤我唷~~

寫程式、技術分享文章很辛苦,寫一篇要花非常久的時間,希望您能幫我點一下頁面上的廣告給我支持跟肯定,讓我更有動力寫這類文章唷~

沒有留言:

張貼留言

writing for work~writing for life~