統計資訊
  • 文章數 - 21
  • 回應數 - 80
  • 引用數 - 0

 

[googlemap]使用google map api來做地址定位

最近參與的一個專案,客戶希望新增加一個功能,要把廠商的位置顯示在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>

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

範例連結
 

---------------

這是簽名檔,I love Dotblogs

 




回應

# re: 使用google map api來做地址定位

你可以把你的範例透過iframe的方式跑在下面~ 2008/1/27 下午 06:13 | dotjum 回覆

# re: 使用google map api來做地址定位

谢谢 2008/4/7 下午 03:33 | jsw7001@hotmail.com 回覆

# re: 使用google map api來做地址定位

謝謝...我正需要運用此功能
受益甚多 2008/5/6 下午 09:16 | stanley 回覆

# re: 使用google map api來做地址定位

謝謝您的分享~~ 2008/5/12 下午 11:48 | maureen 回覆

# re: 使用google map api來做地址定位

請問如果想把map加入由vb.net所開發的windows form,
可行嗎?還是一定需要由asp.net來開發? 2008/6/7 上午 11:07 | kobe wang 回覆

# re: 使用google map api來做地址定位

to kobe wang :

沒有試過說 不知道該怎麼下手 2008/6/7 下午 11:44 | jon 回覆

# re: 使用google map api來做地址定位

請問 function showAddress 裡面的point變數是哪來的阿,在其他地方沒有看到任何poinit的參數傳遞,還是說point是儲存經緯度的值,不過我也沒有看到把經緯度值給point這變數的statment。 不好意思 新手發問 2008/7/11 上午 02:24 | shinjikao 回覆

# re: 使用google map api來做地址定位

請問可以輸入經緯度至google maps,然後顯示位置嗎?謝謝。 2008/8/15 下午 03:02 | ameba 回覆

# re: 使用google map api來做地址定位

to ameba :

你可以參考一下這個範例
http://www.dotblogs.com.tw/jon/archive/2008/06/28/4397.aspx

2008/8/17 上午 08:45 | jon 回覆

# re: 使用google map api來做地址定位

這兩天才開始學 Google Map API,與您分享我練習的 "店家地圖" ,適用於各種具有連鎖店的公司使用。
http://blog.ben.idv.tw/2008/08/google-map.html 2008/8/28 下午 05:13 | 邦邦 回覆

# re: 使用google map api來做地址定位

請問你會像地圖日記的功能嗎?
也就是利用setTimeout去達到多筆資料每隔多少秒就顯示下一筆地點那樣嗎?
可否作個範例教學一下呢?只要二筆資料重複輪流顯示就可以了,不知道方便嗎?
因為我try很多遍,就是一直無法做到,所以大大可以弄一下教學嗎?謝謝! 2008/8/29 上午 10:01 | Josh 回覆

# re: 使用google map api來做地址定位

Great post... Nice example 2008/9/9 下午 03:11 | Net Framework Development 回覆

# re: 使用google map api來做地址定位

超級感謝,先拿簡單的範例來改看看。 2008/9/11 上午 10:44 | 後知後覺的路人 回覆

# re: 使用google map api來做地址定位

請問大大:
我的網頁中想要呈現兩個點連起來的地圖,要有一條路線。我該怎麼改程式碼?
ps:我不要只是打地址而只出現一個點... 2008/11/12 下午 09:04 | Judy 回覆

# re: 使用google map api來做地址定位

很好的例子
謝謝你~~ 2008/12/30 下午 08:40 | uuuiii00 回覆

# re: 使用google map api來做地址定位

對我而言是個有用的範例,
謝謝您的分享 2009/5/6 下午 02:58 | ChrisWang 回覆

# re: 使用google map api來做地址定位

想問一下,最近有個專題研究卡住了。
我透過一個TMC可以隨時收到台灣各地
的路況資訊。只是不知道要怎麼使用google map api?
也就是把他們做結合,就是當我打開自己的google map時
我可以在自己google map裡看到附近的路況資訊。
假如我收尋範圍以台北市市民大道為主的話。
希望可以給些建議 感恩不盡!!!>< 2009/9/9 下午 05:40 | 香菇 回覆

# re: 使用google map api來做地址定位

to 香菇 :

就直接把路況資料加入地圖裡面就可以了

地圖平移的時候 就會顯示出在地圖範圍內的事件點

2009/9/9 下午 07:51 | jon 回覆

# re: 使用google map api來做地址定位

嗯 感謝大大的回應~ 不過就是因為不知道怎樣
把路況資料加入到google maps(程式不知怎麼寫),如果
要寫死的話,是會寫,不過要讓它一直自動更新不會,
假如說台北市某一段區域有可能發生三次車禍。他必須要
在發生的同時就要顯示在google maps,可以說是要
與TMC同步的。所以重點是,不知寫什麼程式匯入google maps 好讓他會自動更新。 拍謝,問那嚜多可能程式寫太少吧XD 詞彙如有不雅請見諒>< 感激不盡

2009/9/10 上午 10:25 | 香菇 回覆

# re: 使用google map api來做地址定位

我使用asp.net C#
新增web form套用主版頁面後
為什麼出現「驗證(Internet Explorer 6):無法將 'html' 項目巢狀化至'div'項目中」

用ie瀏覽 雖有map 按下button 沒有任何改變
2009/11/23 下午 03:03 | doubleAAA 回覆

# re: 使用google map api來做地址定位

你好:
版主可以請教一下嗎?如果要把上面的textbox改成下拉式選單,程式要如何修改,我們試了很久,還是沒有辦法,可以教我們一下嗎?感激不盡,謝謝! 2009/12/26 下午 03:56 | 斑馬 回覆

# re: 使用google map api來做地址定位

請問要怎麼用google map能夠做出可以搜尋台灣的位置+算出兩點之間的距離? 2010/2/14 上午 11:40 | composer 回覆

# re: 使用google map api來做地址定位

為什麼我在GOOGLE MAP上定位了
然後地圖上不會顯示我在哪的那個圖案? 2010/3/4 下午 08:10 | KG 回覆

# re: 使用google map api來做地址定位

請問知道要怎改GOOGLE MAP地圖上的定位指標嗎?
2010/3/5 下午 10:50 | 回覆

# re: 使用google map api來做地址定位

to 儒 :
你好

你可以參考這個範例

http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/icon-simple.html

2010/3/6 下午 08:12 | jon 回覆

# re: 使用google map api來做地址定位

to KG :
不太瞭解你的意思?

2010/3/6 下午 08:13 | jon 回覆

# re: 使用google map api來做地址定位

to jon :
請問
有類似相關這個的程式碼嗎!?
因為我需要程式碼...
很急ˊˋ 2010/3/22 下午 04:13 | 回覆

# re: 使用google map api來做地址定位

有這個範例這類的程式碼嗎?
http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/icon-simple.html

謝謝 2010/3/22 下午 04:15 | 回覆

# re: 使用google map api來做地址定位

to 儒 : 不是直接看原始碼就可以了嗎?? 2010/3/23 上午 12:00 | jon 回覆

# re: 使用google map api來做地址定位

to jon :
不好意思...
我不知道怎看原始碼.....
2010/3/23 上午 12:56 | 回覆

回應




 


登入後使用進階評論

Please add 8 and 7 and type the answer here:

 

 

Copyright © jon的分享空間