Google Maps API 輸入地址轉經緯度,並產生地圖程式分享!!
首先要寫Google Maps API必須要先擁有API KEY
你能夠到以下網址申請
http://code.google.com/apis/maps/signup.html
(一個網址需要申請一個API KEY)
申請完後你能在這個頁面找到些範例程式
http://code.google.com/apis/maps ... examples/index.html
像最簡易的頁面
http://code.google.com/apis/maps ... s/event-simple.html
多了控制項的頁面
http://code.google.com/apis/maps ... control-simple.html
輸入地址轉座標的頁面
http://code.google.com/apis/maps ... ocoding-simple.html
以簡易的地圖來說,只要將二段程式碼貼入頁面就能擁有自己的地圖了
將此段程式碼貼入<head></head>中
<script src="http://maps.google.com/maps?file=api&v=2&key=輸入你的API KEY" type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(23.88001,120.967584), 13); //改成你要的經緯度,後面的13是預設顯示大小
map.addControl(new GSmallMapControl()); //小型地圖控制項
map.addControl(new GMapTypeControl()); //轉換類型地圖控制項
map.enableGoogleBar(); //左下Google地圖搜尋
var marker = new GMarker(new GLatLng(23.88001,120.967584)); //建立標籤的經緯度
map.addOverlay(marker); //顯示標籤
marker.openInfoWindowHtml("你要顯示的文字"); //顯示對話框及文字
}
}
</script>
將此段程式碼貼入<body></body>中
<div id="map" style="width: 600px; height: 500px"></div> <!--此為地圖顯示大小-->
並修改<body>為
<body >
這樣就完成一個簡易的地圖囉
另外介紹用地址轉成經緯度的Google Maps API程式寫法
請依上一篇簡易地圖的寫法修改,只要修改function load()這段...
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
var address = "在這裡輸入你所要顯示的地址"
map.addControl(new GSmallMapControl());
geocoder.getLatLng(address, function(point) {
if (!point) {
alert('Google Maps 找不到該地址，無法顯示地圖！'); //如果Google Maps無法顯示該地址的警示文字
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("在這裡輸入要顯示在對話框的文字");
}
});
}
}
首先要寫Google Maps API必須要先擁有API KEY
你能夠到以下網址申請
http://code.google.com/apis/maps/signup.html
(一個網址需要申請一個API KEY)
申請完後你能在這個頁面找到些範例程式
http://code.google.com/apis/maps ... examples/index.html
像最簡易的頁面
http://code.google.com/apis/maps ... s/event-simple.html
多了控制項的頁面
http://code.google.com/apis/maps ... control-simple.html
輸入地址轉座標的頁面
http://code.google.com/apis/maps ... ocoding-simple.html
以簡易的地圖來說,只要將二段程式碼貼入頁面就能擁有自己的地圖了
將此段程式碼貼入<head></head>中
<script src="http://maps.google.com/maps?file=api&v=2&key=輸入你的API KEY" type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(23.88001,120.967584), 13); //改成你要的經緯度,後面的13是預設顯示大小
map.addControl(new GSmallMapControl()); //小型地圖控制項
map.addControl(new GMapTypeControl()); //轉換類型地圖控制項
map.enableGoogleBar(); //左下Google地圖搜尋
var marker = new GMarker(new GLatLng(23.88001,120.967584)); //建立標籤的經緯度
map.addOverlay(marker); //顯示標籤
marker.openInfoWindowHtml("你要顯示的文字"); //顯示對話框及文字
}
}
</script>
將此段程式碼貼入<body></body>中
<div id="map" style="width: 600px; height: 500px"></div> <!--此為地圖顯示大小-->
並修改<body>為
<body >
這樣就完成一個簡易的地圖囉
另外介紹用地址轉成經緯度的Google Maps API程式寫法
請依上一篇簡易地圖的寫法修改,只要修改function load()這段...
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
var address = "在這裡輸入你所要顯示的地址"
map.addControl(new GSmallMapControl());
geocoder.getLatLng(address, function(point) {
if (!point) {
alert('Google Maps 找不到該地址，無法顯示地圖！'); //如果Google Maps無法顯示該地址的警示文字
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("在這裡輸入要顯示在對話框的文字");
}
});
}
}