GoogleMap API v2再見

Google正式宣布2013.11.19停止支援GoogleMap API v2的版本，全面迎向API v3，R.I.P~，不過也就是這樣先前使用舊版API v2的程式將全部失效。v3和v2的版本再程式上的寫法有很大的不同，所以幾乎沒有辦法調整些許的JavaScript語法就可以直接套用，至於修改了哪些部份就不在一一說明。
下面直接舉例子來說明，先前有個需求需要取出地圖(DIV)的左上角和右下角座標來做運算，在v2寫法法可以直接透過Map Object直接來取用，且GPoint的寫法也有調整。v2的寫法請參閱以下程式碼。

var divWidth = document.getElementById("GoogleMap_Div").clientWidth;
var divHeight = document.getElementById("GoogleMap_Div").clientHeight;

//宣告地圖物件
var map = new GMap2(document.getElementById("GoogleMap_Div"));
var topleft = map.fromContainerPixelToLatLng(new GPoint(0, 0));   //取得地圖左上角座標
var bottomright = map.fromContainerPixelToLatLng(new GPoint(divWidth, divHeight));  //取得地圖,右下角座標

但是新版v3的API進行的修改，除了原先一樣宣告Map Object外，還必須要另外宣告OverlayView Object，並且將OverlayView 加入到地圖當中，才可以透過OverlayView來取得座標資訊，且原先的GPoint Object也改用google.maps.Point Object來取代，詳細請參閱如下程式碼。

//地圖屬性
var mapOptions = 
{
    center: new google.maps.LatLng(22.60709, 120.31340),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

//初始化Map Object
var map = new google.maps.Map(document.getElementById("GoogleMap_Div"),  mapOptions);

//初始化OverlayView  Object
var overlay = new google.maps.OverlayView();

//將OverlayView 加入到 Map當中
overlay.setMap(map);

//等OverlayView畫入Map當中才可以取用<==這裡要特別注意
overlay.draw = function () 
{ 
    var divWidth = document.getElementById("GoogleMap_Div").clientWidth;
    var divHeight = document.getElementById("GoogleMap_Div").clientHeight;
    
    var topleft = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, 0)); //左上角座標
    var bottomright = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(divWidth, divHeight)); //右下角座標
    
    document.getElementById("latlng").value = "左上角座標 :: " + topleft.lat() + ", " + topleft.lng() + "\n";
    document.getElementById("latlng").value += "右下角座標 :: " + bottomright.lat() + ", " + bottomright.lng() + "\n";
}; 

範例示意如下

參考網址 :
Google API v3，請搜尋fromContainerPixelToLatLng
相關問題詢問

程式碼下載