如何在自己的网站上添加Google地图

先给出代码及显示效果.

这是一个最简单的 谷歌地图 Demo.

只需要这样一小段代码,就可以在自己的网站上把 谷歌地图 模块加载进来.

解析各段代码的意义:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

这一行代码的意思是将google api以链接的形式引入到该页面上.这也是最主要的代码.如果没有这一句代码,下面的各个 google map 函数将不会被浏览器所认可.

function initialize() { var mapOptions = {zoom: 8,center: new google.maps.LatLng(-34.397, 150.644) } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)}

initialize 是一个加载初始化函数.当网页第一次被加载的时候会被调用,里面是对 谷歌地图的 地图等级,中心点进行相对的设置,同时将其放到自定义的 map-canvas div当中.

google.maps.event.addDomListener(window, 'load', initialize)

这句话的意思就是当网页加载完成后,去调用 initialize 函数.从而实现地图载并显示在网页里的效果.

下面的地图中,有一个定位点,点击该定位点,可以对其进行地图图层的放大操作,地图中心点的偏移操作.

这一段代码主要是添加标记到地图当中,然后对标记的点击事件做出响应.

google.maps.event.addListener(map, 'center_changed', function() {// 3 seconds after the center of the map has changed, pan back to the// marker.window.setTimeout(function() { map.panTo(marker.getPosition()) }, 3000) })

解析:

在地图上监听中心点变化时所触发的事件,意思就是说,当地图的中心点被移动到了别的地方,那么会在3秒后,回到以标记点为中心的地图上.

google.maps.event.addListener(marker,'click',function(){

map.setZoom(8)

map.setCenter(marker.getPosition())

})

解析:

对地图上的标记点进行点击的时候,会执行 function里面的函数,也就是将地图的图层等级设置为8,设置地图的中心点为 marker 标记的中心点.

将 Google 地图引入自己的当前网站的方法有两种,

分别为 框架引用 和 通过 Google maps api 引用, 两种方法各有优缺点, 下面分别说一下

通过框架引用Google 地图 操作上便捷容易, 适合对代码不是很掌握的同学使用

缺点就是 定制性相对较差 页面中引入了框架结构.

通过Google maps api的方式引入Google 地图相对定制性较强, 应用面更宽泛一些

缺点就是需要自己有一定的动手能力.

废话说完 下面开始动手 实际操作如何将 Google 地图引入自己的网站

先说 第一种方法 框架引用

一 登录自己的google 帐户 (不登录也可以)

二 打开 http://maps.google.com/

三 在搜索框中输入自己想要在地图上标注的地址信息 (参见图 1 黄色高亮标注)

四 右上角 工具栏点击 link , 复制位于 Paste HTML to embed in website 下的调用代码 (参见图 1 绿色高亮标注)

五 打开自己的Zen Cart 并进入后台 然后 工具 简易页面 关于或联系我们 将Google 地图调用代码粘贴在适当的位置 上即可

。。。。。

具体内容转自http://www.xiaochaospace.com/?p=8

1、定位中心点，就是你想要作为中心的位置。点击切换城市，输入就行。

2、再选具体位置。

3、设置地图宽高等参数。

4、添加标记等。

5、获取代码。

6、复制代码。粘贴到html文件中即可，然后只需要你进行页面布局修饰了

---