Google地图显示在jquery弹出窗口中 [英] Google map displaying in jquery pop up window

问题描述

我使用jQuery 1.7我的网站，我需要在Lightbox中显示谷歌地图。

例如： b

http://dev.visualdrugs.net/mootools/gmapsoverlay/

Can你可以帮助我用jQuery做同样的事情。

谢谢

解决方案

这里是一个使用jQuery Colorbox的方法的一些指示的链接：

http://www.primecut.gr/2011/06/colorbox-with-google-maps/

以下是一些简单的代码。这需要jQuery和 Colorbox插件（JavaScript和CSS）。

HTML

 < a class =googleMapPopUphref =https ：//maps.google.com.au/maps？q = south + australiatarget =_ blank> 
查看位置图
< / a> 
  

JavaScript $ b

  $（'。googleMapPopUp'）。each（function（）{
 var thisPopup = $ （this）; 
 thisPopup.colorbox（{
 iframe：true，
 innerWidth：400，
 innerHeight：300，
 opacity：0.7，
 href ：
}）; 
 ：thisPopup.attr（'href'）+'& ie = UTF8& t = h& output = embed'
} > 

演示

I use jQuery 1.7 my web site, i need to show a google Map in a lightbox.

for example : http://dev.visualdrugs.net/mootools/gmapsoverlay/

Can you help me to do the same with jQuery.

Thanks

解决方案

Here is a link to some instructions on one way to do this using jQuery Colorbox:

http://www.primecut.gr/2011/06/colorbox-with-google-maps/

Here is some simple code to this. This requires jQuery and the Colorbox plugin (JavaScript and CSS).

HTML

<a class="googleMapPopUp" href="https://maps.google.com.au/maps?q=south+australia" target="_blank">
    View location map
</a>​

JavaScript

$('.googleMapPopUp').each(function() {
    var thisPopup = $(this);
    thisPopup.colorbox({
        iframe: true,
        innerWidth: 400,
        innerHeight: 300,
        opacity: 0.7,
        href: thisPopup.attr('href') + '&ie=UTF8&t=h&output=embed'
    });
});​

Demo

这篇关于Google地图显示在jquery弹出窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！