[JQuery] Google Map API 實作

Google Map JavaScript API是Google提供的一組API，可以讓設計師自訂或開發Google Map相關的應用程式

Google Maps Javascript API目前的版本是第三版，所以下面的程式都是以第三版為主

如果你玩過第二版，第三版已不需要事先向Goolge申請Key，而可以直接使用

要使用Google Map API，要先在<head>中載入GoogleMapAPI

`1`	`<SCRIPT` `type=text/javascript` `src="http://maps.google.com/maps/api/js?sensor=false"></SCRIPT><SCRIPT` `type=text/javascript` `src="http://maps.gstatic.com/intl/zh_tw/mapfiles/api-3/7/1/main.js"></SCRIPT>`

接著在<body>中新增一個DIV，作為用來顯示地圖的元��

`1`	`<DIV` `style="WIDTH: 600px; HEIGHT: 600px"` `id=mapDiv></DIV>`

接著在<head>中，加入下列JavaScript

`01`	`<SCRIPT type=text/javascript>`

`02`	`function` `initialize() {`

`03`	`var` `myOptions = {`

`04`	`zoom: 14,`

`05`	`center:` `new` `google.maps.LatLng(24.80185, 120.97166),`

`06`	`mapTypeId: google.maps.MapTypeId.ROADMAP`

07 };

`08`	`var` `map =` `new` `google.maps.Map(document.getElementById("mapDiv"), myOptions);`

09 }

`10`	`</SCRIPT>`

Google Map的初始化方法如下

var map = new google.maps.Map( DOM元素,  Options);

在這範例中，Options帶入了3個必填的參數：

zoom：初始時地圖要顯示的比例大小，值的範圍為0~20

center：地圖的中心座標，值需為google.maps.LatLng物件

mapTypeId：地圖的形態，有4種型態可以選擇，分別為RoadMap(地圖)、Satellite(衛星)、Hybrid(地圖和衛星混合)、Terain(地形圖)

在Options中可以設定地圖上是否要顯示一些控制項，這些控制項除scaleControl預設不顯示外，其它預設都會顯示

mapTypeControl: true

navigationControl : true

scaleControl : false

streetViewControl: true

google.maps.LatLng

google.maps.LatLng為Google Map API專用的座標物件，用十進制來表示經緯度，宣告方式為

`1`	`var` `point = google.maps.LatLng(十進制經度, 十進制緯度);`

初始化後可以利用.lat( )和.lng( )方法來取得經緯度，例如

`1`	`var` `point =` `new` `google.maps.LatLng("24.80185",` `"120.97166");`

`2`	`alert( point.lat() +` `", "` `+ point.lng());`

完整範例如下：

`01`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`

02 <html>

03 <head>

`04`	`<meta` `name="viewport"` `content="initial-scale=1.0, user-scalable=no">`

`05`	`<script` `type="text/javascript"` `src="http://maps.google.com/maps/api/js?sensor=false"></script>`

`06`	`<script` `type="text/javascript">`

`07`	`function initialize() {`

`08`	`var myOptions = {`

`09`	`zoom: 14,`

`10`	`center: new google.maps.LatLng(24.80185, 120.97166),`

`11`	`mapTypeId: google.maps.MapTypeId.ROADMAP`

12 };

`13`	`var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);`

14 }

`15`	`</script>`

`16`	`<title></title>`

17 </head>

`18`	`<body` `onload="initialize()">`

`19`	`<div` `id="mapDiv"` `style="width: 400px; height: 400px;"></div>`

20 </body>

21 </html>

上面的範例搭配jQuery可以改寫為

`01`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`

02 <html>

03 <head>

`04`	`<script` `type="text/javascript"` `src="jquery.js"></script>`

`05`	`<script` `type="text/javascript"` `src="http://maps.google.com/maps/api/js?sensor=false"></script>`

`06`	`<script` `type="text/javascript">`

`07`	`$(function(){`

`08`	`var myOptions = {`

`09`	`zoom: 15,`

`10`	`center: new google.maps.LatLng(24.80185, 120.97166),`

`11`	`mapTypeId: google.maps.MapTypeId.ROADMAP`

12 };

`13`	`var map = new google.maps.Map( $('#mapDiv').get(0) , myOptions);`

14 });

`15`	`</script>`

`16`	`<title></title>`

17 </head>

18 <body>

`19`	`<div` `id="mapDiv"` `style="width: 400px; height: 400px;"></div>`

20 </body>

21 </html>

最後附上一個範例，可以讓使用者自訂地圖的尺寸和顯示的比例，執行畫面如下：

範例完整程式碼如下：

`01`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`

02 <html>

03 <head>

`04`	`<script` `type="text/javascript"` `src="jquery.js"></script>`

`05`	`<script` `type="text/javascript"` `src="http://maps.google.com/maps/api/js?sensor=false"></script>`

`06`	`<script` `type="text/javascript">`

`07`	`$(function() {`

`08`	`var myOptions = {`

`09`	`zoom: 15,`

`10`	`center: new google.maps.LatLng(24.80185, 120.97166),`

`11`	`mapTypeId: google.maps.MapTypeId.ROADMAP,`

`12`	`navigationControl: false,`

`13`	`scaleControl: false,`

`14`	`streetViewControl: false,`

`15`	`mapTypeControl: false`

16 };

17

`18`	`var map = new google.maps.Map($('#mapDiv').get(0), myOptions);`

19

`20`	`// 重設地圖尺寸`

`21`	`$('#changeMapSizeBtn').click(function() {`

`22`	`$('#mapDiv').css('width', $('#mapWidth').val()).css('height', $('#mapHeight').val());`

`23`	`map = new google.maps.Map($('#mapDiv').get(0), myOptions);`

24 });

25

`26`	`// 重設地圖顯示比例`

`27`	`$('#zoomChangeBtn').click(function() {`

`28`	`var zoom = $('#mapZoom').val();`

`29`	`zoom = (zoom <` `0) ? 0 : zoom;`

`30`	`zoom = (zoom > 20) ? 20 : zoom;`

`31`	`map.setZoom(parseInt(zoom));`

32 });

33

34 });

`35`	`</script>`

`36`	`<title></title>`

37 </head>

38 <body>

39 <div>

`40`	`地圖寬度：<input` `id="mapWidth"` `size="5"` `type="text"` `/>`

`41`	`地圖高度：<input` `id="mapHeight"` `size="5"` `type="text"` `/>`

`42`	`<input` `id="changeMapSizeBtn"` `type="button"` `value="更新地圖大小"` `/>`

`43`	`<br` `/>`

`44`	`比例<input` `id="mapZoom"` `size="5"` `type="text"` `value="15"` `/><input` `id="zoomChangeBtn"` `type="button"` `value="更新比例"` `/>`

45 </div>

`46`	`<div` `id="mapDiv"` `style="width: 400px; height: 400px;"></div>`

47 </body>

48 </html>