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&t=h&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.
HTML
The plain HTML way is to put it in a <form>
wherein you specify the desired target URL in the action
attribute.
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
If necessary, set CSS display: inline;
on the form to keep it in the flow with the surrounding text. Instead of <input type="submit">
in above example, you can also use <button type="submit">
. The only difference is that the <button>
element allows children.
You'd intuitively expect to be able to use <button href="https://google.com">
analogous with the <a>
element, but unfortunately no, this attribute does not exist according to HTML specification.
CSS
If CSS is allowed, simply use an <a>
which you style to look like a button using among others the appearance
property (it's only not supported in Internet Explorer).
<a href="https://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
If JavaScript is allowed, set the window.location.href
.
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
Instead of <input type="button">
in above example, you can also use <button>
. The only difference is that the <button>
element allows children.
Best Answer
How about this?
https://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003
If you have lat-long then use below URL
Example: maps.google.com/?ll=38.882147,-76.99017
UPDATE
As of year 2017, Google now has an official way to create cross-platform Google Maps URLs:
https://developers.google.com/maps/documentation/urls/guide
You can use links like