网页中Google Map的使用

要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：

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><metaname="viewport"content="initial-scale=1.0, user-scalable=no" /><styletype="text/css">html{height:100%}body{height:100%;margin:0;padding:0}#map_canvas{height:100%}</style><scripttype="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><scripttype="text/javascript">      //初始化地图，使用Map类

      functioninitialize() {varmapOptions={center:newgoogle.maps.LatLng(-34.397,150.644), //指地图定位的坐标，需要LatLng对象，对象参数就是纬度和经度zoom:8,mapTypeId: google.maps.MapTypeId.ROADMAP};varmap= newgoogle.maps.Map(document.getElementById("map_canvas"),   //地图div对象的id名，这个div要指明高度和宽度要不地图没法初始化mapOptions);}</script></head><bodyonload="initialize()"><divid="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 = newgoogle.maps.Marker( {position :new google.maps.LatLng(30,120),map : map,title :"鼠标悬浮时提示的信息",icon :"图片位置字符串"});varyourInfoWindow;(function(userMarker) {google.maps.event.addListener(userMarker,'click', function() {if (!yourInfoWindow) {yourInfoWindow= newgoogle.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 = newgoogle.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(30,120));//为新的结果创建marker
for ( var i inmember) {bounds.extend(new google.maps.LatLng(member[i][2],member[i][3]));var marker = newgoogle.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) {//单例infowindowinfoawindow = newgoogle.maps.InfoWindow({});}infoawindow.open(map, marker);});})(i, marker);
}
map.fitBounds(bounds);//这句最重要

Geocoder类
提交地址字符串返回经纬度（很好用的功能），查询全靠它

如果你不需要在自己的页面中嵌入地图，或者，你没有自己的网站，那么，使用Mapplet API也是一个不错的创建你自己的地图的方式。这是一个可以在谷歌地图主页上“我的地图”中运行的小程序，它的API其实就是谷歌地图API的一个子集，因为要在谷歌地图主页中嵌入，所以与谷歌地图API稍稍有一些不同。详细情况可以参考一下Mapplet API的开发文档

var geocoder = newgoogle.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