最近參與的一個專案，客戶希望新增加一個功能，要把廠商的位置顯示在google map上。終於有機會可以來試試google map api。

首先先去 http://code.google.com/apis/maps/signup.html 申請一組api key，這組key只能用在你設定網站上面。

key產生之後，還有一個簡單的sample code可以參考，複製貼上後，我的第一個map就產生了，真是方便。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=your api key"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>


接下來用這個sample來做一下延伸

map.addControl(new GLargeMapControl());        //加入地圖縮放工具
map.addControl(new GMapTypeControl());        //加入地圖切換的工具
map.addMapType(G_PHYSICAL_MAP);                         //加入地形圖
map.setCenter(new GLatLng(25.001689, 121.460809), 8);      //設定台灣

 

修改一下google提供的範例http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html，加入最大化訊息視窗的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Geocoding</title>

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

    <script type="text/javascript">

    var map = null;
    var geocoder = null;
    var marker;
    
    function initialize()  
    {
        if (GBrowserIsCompatible())  
        {
            map = new GMap2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());                 //加入地圖縮放工具
            map.addControl(new GMapTypeControl());                 //加入地圖切換的工具
            map.addMapType(G_PHYSICAL_MAP);                         //加入地形圖
            map.setCenter(new GLatLng(25.001689, 121.460809), 8);   //設定台灣為中心點
            geocoder = new GClientGeocoder();
        }
    }

    function createMarker(point,title,html)  
    {
        var marker = new GMarker(point);
        
        GEvent.addListener(marker, "click", function()  
        {
            marker.openInfoWindowHtml(
                html,
                {
                    maxContent: html,
                    maxTitle: title}
                );
        });
        return marker;
    }
    
    function showAddress(address)  
    {
        if (geocoder)  
        {
            geocoder.getLatLng(
                address,
                function(point)  
                {
                    if (!point)  
                    {
                        alert(address + " not found");
                    }  
                    else  
                    {
                        if(marker)  //移除上一個點
                        {
                            map.removeOverlay(marker);
                        }
                        
                        map.setCenter(point, 13);
                        
                        var title = "地址";
                        
                        marker = createMarker(point,title,address);

                        map.addOverlay(marker);

                        marker.openInfoWindowHtml(
                            address,
                            {
                                maxContent: address,
                                maxTitle: title}
                            );
                    }
                }
            );
        }
    }
    </script>

</head>
<body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
        <p>
            <input type="text" size="60" name="address" value="台北市中正區重慶南路1段122號" />
            <input type="submit" value="Go!" />
        </p>
        <div id="map" style="width: 500px; height: 300px">
        </div>
    </form>
</body>
</html>

大約花了一個下午的時間，就完成了這個需求，看文件花的時間比較多一些。

範例連結

arrow
arrow
    全站熱搜

    kevin0523 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄