<< Drupal Note- GMap module | 回blog首頁 | Hadoop - getting start >>

October 15,2008

Google Map API

因為專題要用到...所以就順便紀錄一下Google Map API怎麼用
Google真是太強大了
地圖的API其實很完整
只差...3D的地圖了XD

=Getting Start=
1. 先到 http://code.google.com/apis/maps/signup.html 申請一個Application ID

2. 在head裡加入


<script type=\"text/javascript\" src=\"http://maps.google.com/maps?file=api&v=2&key=abcdefg\"> </script>

3. 為了減少Memory Leak的機率，在body load時加入


<body onunload="GUnload()">

=加入Map=
在Body中加入initialize function


<body onload="initialize()" onunload="GUnload()">
設定div區塊以及整個map的width和height


=加入JavaScript=


function initialize() {

//檢查瀏覽器是否可以使用Gmap

    if (GBrowserIsCompatible()) {   

//建立一個Map圖到div id為map的區塊上

        var map =

new GMap2(document.getElementById("map"));   

//設定map的中央是經度為21.5，緯度為121.5

//放大等級為13 (1為世界地圖，15為街道圖

        map.setCenter(new GLatLng(21.5, 121.5), 13);  

//新增一個視窗，位置在目前地圖的中央，

//內容為Hello World (視窗的格式為Html)

        map.openInfoWindow(map.getCenter(),

                   document.createTextNode("Hello, world"));

    }

}


範例：http://code.google.com/apis/maps/documentation/examples/map-infowindow.html
=Example=
http://code.google.com/apis/maps/documentation/examples/

Posted by austintodo at 樂多Roodo! │15:22 │回應(0) │引用(0) │Google Map
樂多分類：網路/3C 工具：編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/7380529


回最上方