google map 初体验
先看一下效果图：
点击这个链接：
下面是实现代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>Google Map</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <link rel="stylesheet"
7 href="http://www.osctools.net/uploads/jquery/dialog/fancybox/source/jquery.fancybox.css?v=2.0.6"
8 type="text/css" media="screen" />
9 </head>
10 <body>
11 <div class="section">
12 <ul>
13 <li>
14 <a class="various fancybox.iframe"
15 href="http://maps.google.com.hk/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google
16 Maps (iframe)</a>
17 </li>
18 </ul>
19 </div>
20 <script type="text/javascript"
21 src="http://www.osctools.net/js/jquery/jquery-1.7.2.js"></script>
22 <script type="text/javascript"
23 src="http://www.osctools.net/uploads/jquery/dialog/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script>
24 <script>
25 $(document).ready(function() {
26 $(".fancybox").fancybox( {
27 openEffect : 'none',
28 closeEffect : 'none'
29 });
30
31 $(".various").fancybox( {
32 maxWidth : 800,
33 maxHeight : 600,
34 fitToView : false,
35 width : '70%',
36 height : '70%',
37 autoSize : false,
38 closeClick : false,
39 openEffect : 'none',
40 closeEffect : 'none'
41 });
42
43 $(".fancybox-button").fancybox( {
44 prevEffect : 'none',
45 nextEffect : 'none',
46 closeBtn : false,
47 helpers : {
48 title : {
49 type : 'inside'
50 },
51 buttons : {}
52 }
53 });
54 });
55 </script>
56 </body>
57 </html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2012-10-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读