Google Map开发系列（五）——怎样在你的网页里嵌入地图

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

1



、最简单的方法



——



使用谷歌地图主页的



"



链接



"



如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。

登录

谷歌地图主页

，定位你需要显示的范围后，点击地图左上角的

“

链接

”

，会出现一个信息框，给出两个输入框，把第二个输入框中的内容拷贝到你的页面上就可以了。

其实，这段嵌入代码就是一个

iframe

的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自定义地图的大小，如果需要的话，我们完全可以通过手动修改这个

iframe

声明来实现更多的自定义，比如，给这段

iframe

加上自定义的样式。

2



、最精简的方法



——



使用谷歌静态地图



如果你需要显示某个特定范围的地图，而且需要在地图上加上一些标记、折线。但是，你并不在乎你网页上的地图能否拖拽，那么，这个静态地图应该就是你需要的了。

所谓静态地图，意思就是你在页面上嵌入的其实只是一个

GIF

图片，这个

GIF

图片是你通过

URL

从谷歌动态获取的，这样的嵌入地图就有别于我们常用的

“

动态

”

地图了，而且，加载这样的地图，比加载一个完整的地图要快捷的多。

要在你的页面上使用这样的静态地图，只需要使用一个

img

标签，把这个标签的

src

属性指定为谷歌静态地图的

url

就可以了。

看一个简单的静态地图

URL

：
http://ditu.google.cn/staticmap?center=39.915175,116.389332&zoom=14&size=500x300&key=YOUR_KEY_HERE
在这个

URL

中，你可以编辑

center

、

zoom

、

size

这些参数来指定地图的中心点、缩放级别、地图大小等等，当然，如果需要在地图上添加标记、折线，你还可以加上对应的参数。不过，不用担心你要记住这么多参数，这里有一个

定制静态地图的向导

，简单的几步就可以得到你需要的

URL

了。如果有兴趣，可以去研究一下

谷歌静态地图的

API

文档

。

严格来说，谷歌静态地图也是谷歌地图

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

中提供的类定制你要在地图上添加的标记、折线等等。

详细的创建谷歌地图过程可以看看我的

“

使用

JavaScript

创建地图步骤详解

”

。但是，要想自如的使用这个

API

，你需要具备一定的

JavaScript

知识和动手能力，此外，强烈建议你先读读

谷歌地图

JavaScript API

的开发指南

，能够解决你的一些常见疑问，当然了，你也可以在我的博客里找找你想了解的知识。

除了上面说的这几种方法，其实还有一些比较少用的方法也可以在网页中嵌入地图，比如使用Google Gadget API

，我在博客右边栏嵌入的地图使用的就是Gadget API

。

如果你不需要在自己的页面中嵌入地图，或者，你没有自己的网站，那么，使用

Mapplet API

也是一个不错的创建你自己的地图的方式。这是一个可以在谷歌地图主页上

“

我的地图

”

中运行的小程序，它的

API

其实就是谷歌地图

API

的一个子集，因为要在谷歌地图主页中嵌入，所以与谷歌地图

API

稍稍有一些不同。详细情况可以参考一下

Mapplet API

的开发文档

。