Question

I’m using jQuery’s thickbox and want to use it for a Google map link(s).

The approach that I’ve seen does not work for the link (URL) format I’m using.

The URL format:

http://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003

So if I use this:

<a class='thickbox' href='http://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003'>
   Map
</a>

it just redirects to the Google Maps page instead of opening the popup with the Google map. I’m trying to append the ajax call to the URL

?height=300&width=300

But it’s not working

Answer 1

I’m posting a separate answer, because there’s a different way to accomplish this – without having the entire google maps page in the Thickbox – we just want the map itself.

This method places the map in a hidden iframe on the page. This is Thickbox’s “inline content” method.

<a href="#TB_inlinemodalContent?height=410&width=505&inlineId=hiddenDiv" title="add a caption to title attribute / or leave blank" class="thickbox">Show hidden modal content.</a>

<div id="hiddenDiv" style="display:none;">
    <iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003&amp;t=h&amp;output=embed"></iframe>
</div>

By adding output=embed we get just the map itself in the iframe. t=h makes it a satellite map. You could add these on to the link in your original method (opening an iframe directly) but mixing the URL parameters for both Google Maps and Thickbox seems to throw it off a bit.