CODEWITHSUNDEEP
jqueryjquery-uigoogle-mapsjquery-pluginsgoogle-maps-api-3
edaklij
edaklij

Reputation: 4251

Google map displaying in jquery pop up window

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

Upvotes: 4

Views: 19153

Answers (1)

3dgoo
3dgoo

Reputation: 15804

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

Upvotes: 5

Related Questions