1. Google Map 初始化：
先 include google map api
接著在Body中加入下面這個Div，這個Div是要用來顯示Google Map的物件
接著加入下面的JavaScript程式碼，可以 寫在body的onload事件 或 jQuery的 $(document).ready 中
var latlng = new google.maps.LatLng(23.69781, 120.96051499999999); //台灣座標
var myOptions = {
zoom: 15, //地圖縮放比例，數字越大，路越大
center: latlng, //地圖的中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP //地圖型態，可參考 這裡
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myOptions = {
zoom: 15, //地圖縮放比例，數字越大，路越大
center: latlng, //地圖的中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP //地圖型態，可參考 這裡
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
2. 新增Marker：
var myLatlng = new google.maps.LatLng(23.69781, 120.96051499999999);
var marker = new google.maps.Marker({
position: myLatlng, //Marker的座標
map: map, //map物件，以這篇文章的例子，就是上面那個map物件
title: 'title' //當滑鼠移至Marker上時，要顯示的Title文字
});
var marker = new google.maps.Marker({
position: myLatlng, //Marker的座標
map: map, //map物件，以這篇文章的例子，就是上面那個map物件
title: 'title' //當滑鼠移至Marker上時，要顯示的Title文字
});
3. 在Marker click時，顯示InfoWindow：
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
4. 新增InfoWindow：
var infowindow = new google.maps.InfoWindow(); //初始一個物件
infowindow.setContent('這是內容'); //InfoWindow的內容，可用Html語法
infowindow.setPosition(myLatlng); //座標
infowindow.setContent('這是內容'); //InfoWindow的內容，可用Html語法
infowindow.setPosition(myLatlng); //座標
5. 在地圖Click時新增一個Marker：
google.maps.event.addListener(map, "click", function(event) {
marker_Click = new google.maps.Marker({
map: map,
position: event.latLng
});
});
marker_Click = new google.maps.Marker({
map: map,
position: event.latLng
});
});
6. 用地址查座標：
function getLatLngByAddr() {
var geocoder = new google.maps.Geocoder(); //定義一個Geocoder物件
geocoder.geocode(
{ address: '[地址]' }, //設定地址的字串
function(results, status) { //callback function
if (status == google.maps.GeocoderStatus.OK) { //判斷狀態
alert(results[0].geometry.location); //取得座標
} else {
alert('Error');
}
}
);
}
var geocoder = new google.maps.Geocoder(); //定義一個Geocoder物件
geocoder.geocode(
{ address: '[地址]' }, //設定地址的字串
function(results, status) { //callback function
if (status == google.maps.GeocoderStatus.OK) { //判斷狀態
alert(results[0].geometry.location); //取得座標
} else {
alert('Error');
}
}
);
}
參考：
http://jayhsunote.blogspot.tw/2011/06/google-map-javascript-api-v3.html
https://developers.google.com/maps/documentation/geocoding/?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-tw
https://developers.google.com/maps/?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/reference?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/events?hl=zh-TW
streetView geocoding
https://developers.google.com/maps/documentation/javascript/services?hl=zh-tw#GeocodingRequests
API 金鑰
http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key