Thickbox and Google Maps Link

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

Maybe it's because you have this part:

http://maps.google.com/?q=

In your link twice?

Answer 2

You may need to remove your double

http://maps.google.com/?q=

as jjclarkson said, but you also need to escape the spaces in your address.

So this:

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

becomes this:

<a class='thickbox' href='http://maps.google.com/?q=http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003'&gt;
   Map
</a>

URLs need to have most non-alphanumeric characters escaped.

Answer 3

To open URLs in an iframe in Thickbox, you need to append this to your URL:

&KeepThis=true&TB_iframe=true&height=400&width=600

See the ThickBox instructions for iFramed Content.

You should indeed remove the double http://maps.google.com/?q= but it should still work if you don't escape the spaces (not that it's good practice).

Answer 4

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.