For the record, if you’re trying to get a google map to load in a Thickbox using Thickbox 3.1, you need to comment out two lines (first and last here):
// if($.browser.safari){//safari needs help because it will not fire iframe onload
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
// }
Those are around line 229.
And now, because I feel so great about all the hours this took, I’ll share how I’m calling up the map. Obviously, I have Mark Huot’s Geo extension installed. I set the default width and height to 100% (instead of 300px) by changing these lines (around 557) in ext.geo.php:
$width = $this->fetch_param('width')!='' ? $this->fetch_param('width') : "100%";
$height = $this->fetch_param('height')!='' ? $this->fetch_param('height') : "100%";
I’ve also got jquery and thickbox all happening up in here. So….
1) User visits real estate page
They say “Aw , cool, where is this swanky piece of real estate at? They see a link like this:
On the HTML page:
http://site.com/property/map/402/?KeepThis=true&TB_iframe=true&height=300&width=600
Under the hood (on the template):
{if prop_geolocation}
<a class="thickbox" href="{path=property/map}{entry_id}/?KeepThis=true&TB_iframe=true&height=300&width=600">
Click to view Map »</a>
{/if}
So, we’ll be calling the map template and it will be looking at {segment_3} for the entry id.
2) Amazing map reveals itself
Behold. (See attached pic of this actually working in FireFox/Mac. What does the map template look like, you say? Glad you asked, I feel like sharing.
Map Template
A little bit edited for clarity, but all the good bits left in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />
<title>The Realty Company</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
body {
position: absolute;
}
body * {
margin: 0;
padding: 0;
}
#gmap {
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
}
#gmap > div { overflow: visible; }
</style>
</head>
<body>
<div id="gmap">
{exp:weblog:entries weblog="property" entry_id="{segment_3}"}
{prop_geolocation}
{/exp:weblog:entries}
</div>
</body>
</html>
That’s it. School’s out and I have 3288 characters remaining!
May you have an easier time implementing than I did!
Click thumbnail to see full-size image
This is what I was hoping the geocoding add-on did.
