要在自己的網頁中嵌入地圖，常用的方法可以歸納爲以下幾種：
1、最簡單的方法 ——使用谷歌地圖主頁的"鏈接"
如果你只需要在自己的頁面上顯示某個特定範圍的地圖，比如你的公司所在地，但是不需要在地圖上添加任何額外的內容，比如標記、折線等等，那麼，使用這個方法來嵌入谷歌地圖是最簡單的。
登錄谷歌地圖主頁，定位你需要顯示的範圍後，點擊地圖左上角的“鏈接”，會出現一個信息框，給出兩個輸入框，把第二個輸入框中的內容拷貝到你的頁面上就可以了。
其實，這段嵌入代碼就是一個iframe的聲明，所以，雖然地圖主頁提供一個自定義地圖並預覽的功能，但是隻能自定義地圖的大小，如果需要的話，我們完全可以通過手動修改這個iframe聲明來實現更多的自定義，比如，給這段iframe加上自定義的樣式。
2、最精簡的方法 ——使用谷歌靜態地圖
如果你需要顯示某個特定範圍的地圖，而且需要在地圖上加上一些標記、折線。但是，你並不在乎你網頁上的地圖能否拖拽，那麼，這個靜態地圖應該就是你需要的了。
所謂靜態地圖，意思就是你在頁面上嵌入的其實只是一個GIF圖片，這個GIF圖片是你通過URL從谷歌動態獲取的，這樣的嵌入地圖就有別於我們常用的“動態”地圖了，而且，加載這樣的地圖，比加載一個完整的地圖要快捷的多。
要在你的頁面上使用這樣的靜態地圖，只需要使用一個img標籤，把這個標籤的src屬性指定爲谷歌靜態地圖的url就可以了。
看一個簡單的靜態地圖，以下示例包含紐約市區靜態地圖圖片的網址，如下所示：
http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false
在這個URL中，你可以編輯center、zoom、size這些參數來指定地圖的中心點、縮放級別、地圖大小等等，當然，如果需要在地圖上添加標記、折線，你還可以加上對應的參數。不過，不用擔心你要記住這麼多參數，這裏有一個定製靜態地圖的嚮導，簡單的幾步就可以得到你需要的URL了。
請注意，您並非一定要使用密鑰（雖然我們推薦這麼做）。本文中的示例都不包含 key 參數，因此將適用於剪切粘貼該代碼的所有用戶。
嚴格來說，谷歌靜態地圖也是谷歌地圖API的一種，所以，使用靜態地圖是需要你的谷歌地圖API密鑰的，如果你之前定義過地圖API的密鑰，直接copy過來就可以了，不需要再去註冊。
3、最自由的方法 --使用谷歌地圖API
如果上面兩種方式都不能滿足你的需求，那麼，就來試試 谷歌地圖API。吧。雖然谷歌地圖API已經細分爲JavaScript、Flash、Earth、Static等等多個版本，但是，在我看來，JavaScript API是谷歌地圖API的根本，所以，在我的博客裏，除非特別指明，說到谷歌地圖API都是指谷歌地圖JavaScript API。使用這個API，你可以用你願意的任何可行的表現形式在地圖上展現你的數據，甚至可以把你自己的地圖做的比谷歌地圖還漂亮。
要使用這個API在頁面中嵌入地圖，簡單的步驟就是：
1）使用JavaScript標籤導入地圖API類庫；
2）在頁面上定義一個裝載地圖的元素，通常使用一個div標籤，指定width和height;
3）在你的JavaScript代碼中new GMap2(document.getElementById("your map container's id"));
4）使用GMarker、GPolyline等API中提供的類定製你要在地圖上添加的標記、折線等等。
一個簡單的完整HTML如下：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> //sensor 是否會使用 GPS 定位器等傳感器來確定用戶的位置,必須將該值明確設爲 true 或 false </script> <script type="text/javascript">
//初始化地圖，使用Map類
function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), //指地圖定位的座標，需要LatLng對象，對象參數就是緯度和經度 zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), //地圖div對象的id名，這個div要指明高度和寬度要不地圖沒法初始化 mapOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
地圖類型 google.maps.MapTypeId
ROADMAP，用於顯示 Google 地圖的默認、普通 2D 圖塊。SATELLITE，用於顯示拍攝的圖塊。HYBRID，用於同時顯示拍攝的圖塊和重要地圖項（道路、城市名）的圖塊圖層。TERRAIN，用於顯示自然地形圖塊，其中包含海拔和水體地圖項（山脈、河流等）。
除了上面說的這幾種方法，其實還有一些比較少用的方法也可以在網頁中嵌入地圖，比如比如使用Google Gadget API，我在博客右邊欄嵌入的地圖使用的就是Gadget API。
Marker類、InfoWindow
添加自定義的marker：
var userMarker = new google.maps.Marker( { position : new google.maps.LatLng(30,120), map : map, title : "鼠標懸浮時提示的信息", icon : "圖片位置字符串" }); var yourInfoWindow; (function(userMarker) { google.maps.event.addListener(userMarker, 'click', function() { if (!yourInfoWindow) { yourInfoWindow = new google.maps.InfoWindow( {}); } yourInfoWindow.setContent(userMarker.title); yourInfoWindow.open(map, userMarker); }); })(userMarker);
1、Marker類是爲地圖上添加類似小圖釘似的提示位置用的東西
2、Marker需要設置座標和地圖對象來初始化
3、同一個Marker對象要重用時使用下面語句重新使用
userMarker.setMap(null);
4、最後是爲marker對象添加點擊事件，使用的是嵌套寫法（用在for循環裏更好使）
5、infowindow是彈出的那個大窗體，他的setContent方法是支持html和css代碼的，可以放進去div或table設置樣式
LatLngBounds類
Map範圍自適應：
var bounds = new google.maps.LatLngBounds(); bounds.extend(new google.maps.LatLng(30,120)); //爲新的結果創建marker for ( var i in member) { bounds.extend(new google.maps.LatLng(member[i][2],member[i][3])); var marker = new google.maps.Marker( { position : new google.maps.LatLng(member[i][2], member[i][3]), map : map, title : "title", icon : "imageAddress" }); markers.push(marker); //爲marker添加infowindow，添加點擊事件 (function(i, marker) { google.maps.event.addListener( marker, 'click', function() { if (!infoawindow) {//單例infowindow infoawindow = new google.maps.InfoWindow( {}); } infoawindow.open(map, marker); }); })(i, marker); } map.fitBounds(bounds);//這句最重要
Geocoder類
提交地址字符串返回經緯度（很好用的功能），查詢全靠它
如果你不需要在自己的頁面中嵌入地圖，或者，你沒有自己的網站，那麼，使用Mapplet API也是一個不錯的創建你自己的地圖的方式。這是一個可以在谷歌地圖主頁上“我的地圖”中運行的小程序，它的API其實就是谷歌地圖API的一個子集，因爲要在谷歌地圖主頁中嵌入，所以與谷歌地圖API稍稍有一些不同。詳細情況可以參考一下Mapplet API的開發文檔
var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address' : "格式可以是不分割的：北京市東城區東直門，或北京市,東城區,東直門" }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { myLatLng = results[0].geometry.location; //results數組裏有很多有用的信息，包括座標和返回的標準位置信息 } else { alert(interGeoAnalysisFailed); } });
地圖導航服務
var map; //地圖對象 var mode = google.maps.DirectionsTravelMode.DRIVING; //谷歌地圖路線指引的模式 var directionsDisplay = new google.maps.DirectionsRenderer(); //地圖路線顯示對象 var directionsService = new google.maps.DirectionsService(); //地圖路線服務對象 var directionsVisible = false; //是否顯示路線 directionsDisplay.setMap(null); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); //將路線導航結果顯示到div中 var request = {origin: findLatLng, destination: marker.position, travelMode: mode, optimizeWaypoints: true, avoidHighways: false,avoidTolls: false}; directionsService.route ( request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } } ); directionsVisible = true;
詳細情況和進一步的參考：https://developers.google.com/maps/documentation
轉載於:https://www.cnblogs.com/JoannaQ/archive/2013/03/12/2954992.html