必优博客

使用jQuery插件GoogleMapsModal可以实现Google地图模拟功能，把Google地图放在你需要的任何地方,效果图如下:

使用说明
需要使用jQuery库文件和GoogleMapsModal库文件

使用实例
一，包含文件部分

1. <script language="javascript" src="jquery-1.3.1.min.js" type="text/javascript"></script>
2. <script language="javascript" src="jquery.google-maps-modal.js" type="text/javascript"></script>
3. <link href="gMapsModal.css" media="all" type="text/css" rel="stylesheet" />

二，HTML部分

1. <a href="#" class="mapa">Google地图</a>

三，Javascript部分

1. <script language="javascript" type="text/javascript">
2. $(function(){
3. $('a.mapa').teste({
4. bgColor: '#000',
5. bgOpacity: 0.8,
6. mapWidth: 600,
7. mapHeight: 350,
8. mapText: 'Google地图',
9. mapUrl:'http://www.google.com/maps?output=embed'
10. });
11. });

</script>

点击Google地图链接弹出Google地图模拟窗口。

GoogleMapsModal插件参数：
bgColor表示背景色
bgOpacity表示背景色的透明度
mapWidth表示地图宽度
mapHeight表示地图高度
mapText表示地图文本
mapUrl表示地图URL路径

如上实例，如果需要获取特定地点的坐标，可以指定mapUrl，如下(具体可以下载实例包)：

1. mapUrl: 'http://www.google.com/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=Parque+ibirapuera&amp;sll=-23.623704,-46.561111&amp;sspn=0.092006,0.181961&amp;ie=UTF8&amp;s=AARTsJoZOnljttHb6BAp9fGn-ngks2fbFg&amp;ll=-23.588138,-46.657734&amp;spn=0.027531,0.036478&amp;z=14&amp;output=embed'

如何获取指定地点路径？
在Google Maps中查找所需要的地址，然后将搜索后的结果如：杭州，右键复制其链接地址。

其中，使用&amp;代替&符号
注意：最后一个参数output=embed，表示嵌入式输出google地图，大家可以测试看看。

mapUrl可以是任意URL路径，如http://www.biuuu.com/，这就是扩展应用，使用这个插件可以实现很多的扩展应用，如弹出新窗口，打开一个新的URL页面等等。

GoogleMapsModal插件的库文件比较简单，大家可以看看，应该能有很多的收获。

点我下载jQuery插件GoogleMapsModal