谷歌地图添加

很多网站喜欢在关于或联系我们页面中添加一个Google地图,
以章显正规, 在Zen Cart上也可以很容易的添加一个这样的东西; 而且操作上相对更容易,
将Google地图引入自己的当前网站的方法有两种,
分别为框架引用和通过Google maps api 引用, 两种方法各有优缺点, 下面分别说一下
通过框架引用Google 地图操作上便捷容易, 适合对代码不是很掌握的同学使用缺点就是定制性相对较差页面中引入了框架结构.
通过Google maps api的方式引入Google 地图相对定制性较强, 应用面更宽泛一些缺点就是需要自己有一定的动手能力.
废话说完下面开始动手实际操作如何将Google 地图引入自己的网站;
先说第一种方法框架引用
一登录自己的google 帐户(不登录也可以)
二打开/
三在搜索框中输入自己想要在地图上标注的地址信息(参见图 1 黄色高亮标注) 四右上角工具栏点击link , 复制位于Paste HTML to embed in website 下的调用代码(参见图 1 绿色高亮标注)
五打开自己的Zen Cart 并进入后台然后工具简易页面关于或联系我们将Google 地图调用代码粘贴在适当的位置上即可;
图1 (点击图片查看大图)
继续 第二种方法 Google maps API 引用
一 打开 https:///intl/zh-CN/apis/maps/signup.html
二 在这里按提示输入相关信息 申请一个 Google maps API 密钥 并复制保存记录好 (如图2 标示) 图
2 点击图片查看大图
三 打开 includes/templates/你的当前模板目录
/common/html_header.php 在 </head> 前 加入
1 <script
src ="/maps?file=api&amp;v=3&amp;se nsor=true&amp;key=你的
Key"type ="text/javascript"></script >
四 继续 在 </head> 前 加入下面的 JS 详细说明参见代码中的 注释
1
2 3 4
5 6
7 8
9 1
<script type ="text/javascript"> <!-- //initMap()函数，将地图程序加入页面 function initMap (){ //GBrowserIsCompatible()确定Api 能否兼容当前浏览器 if (GBrowserIsCompatible ()) { //在ID 为"Gmap"的层内显示地
0 1
1 1
2 1
3 1
4 1
5 1
6 17
18
19 20
21
22
23
24
25
2
6
2
7
2
8
2
9
3
3
1
3
图 var map = new GMap2(document.getElementById ("Gmap")); //定义一个经纬度点 var point = new GLatLng (47.48806400761193, 19.105825424194336); //定义一个标注对象 var marker = new GMarker (point ); //在地图上加入标注 map.addOverlay (marker ); //定义字符串 var info = "<font color='#339900'>1087 Budapest &nbsp; Kőbányai Út 29</font>"; //设置点击出现冒泡，内容为预先定义的HTML 字串 marker.bindInfoWindowHtml (info ); //设置地图中心点和缩放级别
map.setCenter (new GLatLng (47.48806400761193, 19.105825424194336), 12); //加载大“鱼骨”，包含方向、缩放按钮和缩放级别控制滑块 map.addControl (new GLargeMapControl ()); //加载地图类型按钮map.addControl (new GMapTypeControl ()); //加载小地图 map.addControl (new GOverviewMapControl ()); //加载比例尺 map.addControl (new GScaleControl ()); } } //--></scrip t >
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0 五 在需要引入地图的页面中适当的位置 加入 下面的代码 详细说明参见代码中的注释
至此 在网站中引入Google 地图的两种方法介绍完毕!
要点提示:
一. 使用 google maps api 的方式引入地图 在页头导入 对应的JS 库时 你的Key 对应 你所申请到的 密钥
二. google maps api 密钥的申请地址, 最好使用与当前网站语言一至的语言申请, 在方法二中的提供的申请地址为简体中文地址 在此地址右上角 有对应的语言选择
三. 配置 google maps api 涉及到的标注地址 经纬度 可通过如下方式获取;
1. 打开 /
2. 如图1 中 黄色高亮标示 在这里输入要查询的地址并回车
3. 在浏览器 将下面的JS 代码粘贴并回车 就会得到对应的地址经纬度 如图3 1 javascript :void (prompt ('',gApplication.getMap ().getCente r ()));
4. 复制得到的经纬度值粘贴到JS配置项中对应的代码位置上即可
四.页面地图层的样式调整可按实际情况配置比如宽高
对于方法一可调整引用代码中width:值和height:值控制宽高
对于方法二可调整style="width: 650px; height: 420px;中的值来控制或另行指定样式类或ID来控制调整样式
五.无论哪种方法, 在Zen Cart 自定义页面中引入地图粘贴代码时请将当前编辑器切换到文本编辑器或HTML 代码状态下粘贴
六.如果你有足够的耐心和想要更多的去了解一下Google maps api 哪么可以仔细的看下Google 官方提供的帮助手册, 不过我估计十之八九会让大部分同学看的云里雾去,不知所然, Google 的帮助说明总是弄的这么高深 >.<
Google maps API 帮助手册地址:
https:///intl/zh-CN/apis/maps/documentation/javascript/basics.html
最后附一张通过Google maps api 方式引入的效果截图(点击图片查看大图)。