製作地圖方式一 (取得欲標記地點的經緯座標值)

製作地圖方式一 (取得欲標記地點的經緯座標值)：

第一步驟：進入 Google Maps 搜尋頁面 Go

第二步驟：輸入欲標記地點的地址或名稱，按[搜尋地圖] (注意：街弄門牌號碼等數字不可有空格)。

第三步驟：確認搜尋位置無誤後，並縮放調整適當的比例，按地圖右邊[連結]，取得第一段內的地圖連結碼。
實做範例 Go
我取得併調整過後的座標連結碼如下：
http://maps.google.com/maps?f=q&hl=zh-TW&geocode=&q=%E8%87%BA%E5%8C%97%E7%B8%A3%E6%B1%90%E6%AD%A2%E5%B8%82%E9%BE%8D%E5%AE%89%E8%B7%AF185%E8%99%9F4%E6%A8%93&sll=37.0625,-95.677068&sspn=32.527387,56.25&ie=UTF8&ll=25.063792,121.653049&spn=0.009077,0.013733&z=16&iwloc=addr
備註：如果您對於網頁語言 HTML 稍有瞭解的話，你只要在自己的網頁上加上這段連結即可。
注意：標示紅字 (25.063792,121.653049) 的部份就是經度與緯度，請將它記下來等一下我們會使用到。

第四步驟：您也可以選擇第二段 [貼上 HTML 以嵌入您的網站]。
實做範例 Go
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=zh-TW&geocode=&q=%E5%8F%B0%E7%81%A3%E5%8F%B0%E5%8C%97%E7%B8%A3%E6%B1%90%E6%AD%A2%E5%B8%82%E9%BE%8D%E5%AE%89%E8%B7%AF185%E8%99%9F&sll=25.062752,121.653057&sspn=0.009077,0.013733&ie=UTF8&ll=25.072772,121.657276&spn=0.009077,0.013733&z=14&iwloc=addr&output=embed&s=AARTsJqJmtkrXjmrKLxOl9ds84AEZNvDQg"></iframe>
<br /><small><a href="http://maps.google.com/maps?f=q&hl=zh-TW&geocode=&q=%E5%8F%B0%E7%81%A3%E5%8F%B0%E5%8C%97%E7%B8%A3%E6%B1%90%E6%AD%A2%E5%B8%82%E9%BE%8D%E5%AE%89%E8%B7%AF185%E8%99%9F&sll=25.062752,121.653057&sspn=0.009077,0.013733&ie=UTF8&ll=25.072772,121.657276&spn=0.009077,0.013733&z=14&iwloc=addr&source=embed" style="color:#0000FF;text-align:left">檢視較大的地圖</a></small>
備註：如果想要在網頁中某個地方插入地圖，就可以使用這個 [貼上 HTML 以嵌入您的網站] 功能即可。
注意：按自訂和預覽內嵌地圖，可調整地圖大小後在套用。

第五步驟：將前面您取得的 API Key 套到網頁 <head> 與 </head>之間

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

第六步驟：將以下範例程式複製到 <body> 與 </body> 之間：

<div id="mymap" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("mymap"));

//設定要顯示的控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//決定 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(25.063792,121.653049), 16);

//標記在 Google 地圖上的經緯度
var point = new GLatLng(25.063792,121.653049);
var marker = new GMarker(point);

//在地圖上放置標點
map.addOverlay(marker);

//在此標記所要顯示的資訊
var html = "我是網頁研習室 - 李文能<br>台灣台北縣汐止市龍安路185號";
map.openInfoWindowHtml (map.getCenter(), html);

//]]>
</script>

第七步驟：這樣就算完成了
請看實做範例 Go ，並按檢視原始碼查看製作方式。

網頁研習室 - HTML教學 - 電子報教學 - 李文能 - 編輯