使用jQuery擴展GoogleMap APIV3

網路上找到的Google Map API 教學大部分都是 V2 之前的版本，但是目前Google Map API 的版本都已經更新到V3⁺，因此在這裡就分享一下自己用jQuery來擴展新版的GoogleMap API
1. 首先必須宣告一個DIV區域用來顯示GoogleMap

<div id=map1></div>

2. 再來就是宣告JavaScript的部份了

<script src="https://sites.google.com/site/lawrenceshenpe/blogsample/jquery-1.4.1.min.js?attredirects=0&d=1" type=text/javascript></SCRIPT>
<script src="http://maps.google.com/maps/api/js?sensor=false&language=zh-tw" type=text/javascript></SCRIPT>
<script src="https://sites.google.com/site/lawrenceshenpe/blogsample/jquery.gmap3.1.js?attredirects=0&d=1" type=text/javascript></SCRIPT>

<script type=text/javascript>
//<![ CDATA{
var gmap1 = '#map1';

$(function () {
    //顯示地圖的大小
    $(gmap1).css({
        width: '300px',
        height: '300px'
    });
    //初始化物件
    $(gmap1).gmaps3({
        Zoom: 13,
        HomeControl : true
     });
})
//]]>
</script>

初始化物件時提供的屬性 預設中心點 : GLatLng: [22.607090306469686, 120.3134036064148]
地圖大小 : Zoom: 10

圓周物件(Km) : Radius: 1000
圓周折線內部顏色 : GPolylineFillColor: "#FF0000"
圓周折線顏色 : GPolylineStrokeColor: "#FF0000"
圓周折線寬度 : GPolylineWeight: 2
圓周折線內部透明度 : GPolylineOpacity: 0.3
地圖類型 : MapType: 1
    1 : ROADMAP 顯示 Google 地圖的正常、預設 2D 地圖方塊。
    2 : SATELLITE 顯示圖形地圖方塊。
    3 : HYBRID 會顯示圖形地圖方塊和特殊圖徵 (道路、城市名稱) 地圖方塊圖層的混合圖。
    4 : TERRAIN 會顯示實際起伏的地圖方塊，以展現地形高度和水域圖徵 (山嶽、河流等)。

是否停用所有預設UI : DefaultUI: false

導航列(縮放比例) Control : NavigationUIStyle: 4    1 : SMALL 會顯示迷你縮放控制項，當中僅提供 [+] 和 [-] 按鈕，十分適合行動裝置。
    2 : ZOOM_PAN 會顯示標準縮放滑桿控制項和平移控制項，就跟「Google 地圖」的控制項一樣。
    3 : ANDROID 會顯示小型的縮放控制項，就跟 Android 裝置內建的「地圖」應用程式的控制項一樣。
    4 : DEFAULT 會根據地圖的大小以及執行地圖的裝置類型，挑選適當的導覽控制項

是否啟用導航列Control : NavigationUI: true
MapType Control : MapTypeUIStyle: 3    1 : HORIZONTAL_BAR 會以按鈕形式，在水平列上顯示一組控制項，如「Google 地圖」所示。
    2 : DROPDOWN_MENU 會顯示一個按鈕控制項，讓您透過下拉式選單選取地圖類型。     3 : DEFAULT 會顯示「預設」行為，行為內容將視螢幕大小而定，且可能會因為 API 版本而有所不同。

是否啟用MapType Control : MapTypeUI: true
是否啟用比例尺 Control : ScaleUI: true
右下方小地圖是否啟用 : OverViewMapUI: true
是否啟用預設中心點 : HomeControl: false
預設中心點座標 : HomeGLatLng: [22.607090306469686, 120.3134036064148]擴展方法如下$(XXX).getMap3() : 取得GoogleMap物件

$(XXX).getZoom() : 取得地圖Zoom Level

$(XXX).getCenter() : 取得地圖中心點座標

$(XXX).setZoom(level, [callbackevent]) : 設定地圖Zoom Level

$(XXX).setOptions(options, [callbackevent]) : 設定地圖控制項參數( Ex: 控制項位置)

$(XXX).panTo(options, [callbackevent]) : 平滑的移動到新的中心點

$(XXX).addMapListener(eventname, evencallback) : 加入Map Event

$(XXX).addMarkerListener(marker, eventname, evencallback) : 加入Marker Event

$(XXX).setMapTypeId(options, [callbackevent]) : 變更地圖類型

$(XXX).createGLatLng(lat, lng) : Create 座標

$(XXX).createGMarker(GLatLng, [options]) : Create Marker

$(XXX).addGMarker(options, [marker1], [callbackevent]) : 加入座標

$(XXX).clearOverlays([callbackevent]) : 暫時清除座標

$(XXX).showOverlays([callbackevent]) : 顯示座標(含暫時清除)

$(XXX).deleteOverlays([callbackevent]) : 刪除座標

$(XXX).addGMarker1(gmarker, [callbackevent]) : 加入特定GMarker

$(XXX).setGMarker1(gmarker, glatlng, [callbackevent]) : 移動特定GMarker

$(XXX).reomoveMarker1(gmarker, [callbackevent]) : 刪除特定GMarker

$(XXX).addGPolyline.(arylatlng, [options], [callbackevent]) : 加入折線

$(XXX).removeGPolyline.([callbackevent]) : 移除折線

$(XXX).Circle.([options], [callbackevent]) : 加入圓周

$(XXX).removeCircle.() : 移除圓周

$(XXX).createCirclePolygon.([options], [callbackevent]) : 畫出中心點圓周(保留API V2 之前的做法)

本文附件 : jquery.gmap3.1.js