網頁製作結合google map

Question

請問一下有人知道如何將google map上設定的目標點.原有的顯示框上加上自己的照片縮圖.或者是這樣( http://www.mutekiya.com/shop/index.html )如這間店的製作方式製做呢?!....thnx~

Answer 1

這段小小教學並不是針對初學者 (怎樣知道自己是不是初學者？你知道 Java 跟 Javascript 分別嗎？你能掌握 html，只用純文字處理器就能寫個圖文並茂的靜態網頁等等...您如果只會繳錢玩網誌，蒐集人家的音樂撥放器小玩藝，那勸你打消念頭)

1. 去 Google Map API 網頁 (http://www.google.com/apis/maps/) 登記使用。
2. 點選「Sign up for a Google Maps API key」。
3. 在「I have read and agree with the terms and conditions」前面打勾，並在「My web site URL:」填入你的網址，然後按 Generate API Key。
4. Google Map API 會產生一個一開始的型版的 HTML 代碼 (不要問我這裡的 Javascript 能不能轉 iframe，只要你看過代碼有這個念頭表示你還是初學者)，貼到自己申請的網頁空間 (不會申請網頁空間？恩，不要繼續讀了....)裡頭的靜態網頁 (.html / .htm)，然後開始改。
5. 技術文件參考：

http://www.google.com/apis/maps/documentation/index.html
http://www.google.com/apis/maps/documentation/reference.html

6. 那個日本站用的範例在 map.setCenter 後的代碼：


map.addControl(new GLargeMapControl());


gpObj = new GPoint(緯度,經度);
iconObj = new GIcon();
iconObj.image = "圖檔網址";
iconObj.iconSize = new GSize(寬,高);
iconObj.iconAnchor = new GPoint(x座標,y座標);
marker = new GMarker(gpObj, iconObj);
map.addOverlay(marker);

它設了三個 ICONs。詳細函式庫請參考 google api reference 如上。