网页中Google Map的使用
要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：
1、最简单的方法 ——使用谷歌地图主页的"链接"
如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。
登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，把第二个输入框中的内容拷贝到你的页面上就可以了。
其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自定义地图的大小，如果需要的话，我们完全可以通过手动修改这个iframe声明来实现更多的自定义，比如，给这段iframe加上自定义的样式。
2、最精简的方法 ——使用谷歌静态地图
如果你需要显示某个特定范围的地图，而且需要在地图上加上一些标记、折线。但是，你并不在乎你网页上的地图能否拖拽，那么，这个静态地图应该就是你需要的了。
所谓静态地图，意思就是你在页面上嵌入的其实只是一个GIF图片，这个GIF图片是你通过URL从谷歌动态获取的google map中文版，这样的嵌入地图就有别于我们常用的“动态”地图了，而且，加载这样的地图，比加载一个完整的地图要快捷的多。
要在你的页面上使用这样的静态地图，只需要使用一个img标签，把这个标签的src属性指定为谷歌静态地图的url就可以了。
看一个简单的静态地图发发库Sitemaps，以下示例包含纽约市区静态地图图片的网址，如下所示：
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已经细分为、Flash、Earth、Static等等多个版本，但是，在我看来， API是谷歌地图API的根本，所以，在我的博客里，除非特别指明，说到谷歌地图API都是指谷歌地图 API。使用这个API，你可以用你愿意的任何可行的表现形式在地图上展现你的数据，甚至可以把你自己的地图做的比谷歌地图还漂亮。
要使用这个API在页面中嵌入地图，简单的步骤就是：
1）使用标签导入地图API类库；
2）在页面上定义一个装载地图的元素，通常使用一个div标签，指定width和height;
3）在你的代码中new GMap2(.("your map 's id"));
4）使用GMarker、等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.
除了上面说的这几种方法，其实还有一些比较少用的方法也可以在网页中嵌入地图，比如比如使用Google Gadget APIgoogle map中文版，我在博客右边栏嵌入的地图使用的就是Gadget API。
Marker类、 添加自定义的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、是弹出的那个大窗体，他的方法是支持html和css代码的，可以放进去div或table设置样式
类
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);//这句最重要
类
提交地址字符串返回经纬度（很好用的功能）网页中Google Map的使用，查询全靠它
如果你不需要在自己的页面中嵌入地图，或者，你没有自己的网站，那么，使用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;
详细情况和进一步的参考：
【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】