谷歌地图显示在jquery弹出窗口中

时间:2012-11-28 04:22:32

标签: jquery jquery-ui google-maps jquery-plugins google-maps-api-3

我使用jQuery 1.7我的网站,我需要在灯箱中显示谷歌地图。

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

你能帮我用jQuery做同样的事。

由于

1 个答案:

答案 0 :(得分:5)

以下是使用jQuery Colorbox执行此操作的一些说明的链接:

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

这是一些简单的代码。这需要jQuery和Colorbox plugin(JavaScript和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