很多网站喜欢在关于或联系我们页面中 添加一个Google地图,

以章显正规, 在 Zen Cart 上也可以很容易的添加一个这样的东西; 而且操作上相对更容易,

将 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 地图调用代码粘贴在适当的位置 上即可;

图 1    (点击图片查看大图)

继续 第二种方法 Google maps API 引用

一 打开 https://code.google.com/intl/zh-CN/apis/maps/signup.html

二 在这里按提示输入相关信息 申请一个 Google maps API  密钥 并复制保存记录好 (如图2 标示)

图 2   点击图片查看大图

三 打开 includes/templates/你的当前模板目录/common/html_header.php 在 前 加入

四 继续 在 前 加入下面的 JS 详细说明参见代码中的 注释

五 在需要引入地图的页面中适当的位置 加入 下面的代码 详细说明参见代码中的注释

至此 在网站中引入Google 地图的两种方法介绍完毕!

 要点提示:

一. 使用 google maps api 的方式引入地图 在页头导入 对应的JS库时 你的Key 对应 你所申请到的 密钥

二. google maps api 密钥的申请地址, 最好使用与当前网站语言一至的语言申请, 在方法二中的提供的申请地址为简体中文地址 在此地址右上角 有对应的语言选择

三. 配置 google maps api 涉及到的标注地址 经纬度 可通过如下方式获取;

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

2. 如图1 中 黄色高亮标示 在这里输入要查询的地址并回车

3. 在浏览器 将下面的JS代码粘贴并回车 就会得到对应的地址经纬度 如图3

4. 复制得到的经纬度值 粘贴到JS配置项中对应的代码位置上 即可

四. 页面地图层 的样式调整 可按实际情况配置 比如宽高

对于方法一 可调整 引用代码中  width:值  和 height: 值 控制宽高

对于方法二 可调整 style="width: 650px; height: 420px; 中的值来控制 或另行指定样式类或ID来控制调整样式

五. 无论哪种方法, 在Zen Cart 自定义页面中 引入地图粘贴代码时 请将当前编辑器切换到文本编辑器或 HTML 代码状态下粘贴

六. 如果你有足够的耐心和想要更多的去了解一下 Google maps api 哪么可以仔细的看下 Google 官方提供的帮助手册, 不过我估计十之八九会让大部分同学看的云里雾去,不知所然, Google 的帮助说明总是弄的这么高深  >.<

Google maps API 帮助手册地址:

https://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html

最后附一张 通过 Google maps api 方式引入的效果 截图 (点击图片查看大图)