Google Maps into Thickbox

Okay, this isn't really meant to be a tech blog or nothin', heck, I dunno what this blog is about, but I do know that people find stuff on here via google and whatnot, so I thought I'd post something on here about Google Maps that I just figured out, and hopefully some people can find this useful. I won't go through a lot of details here - if you found this, then you already are probably deep into this stuff.

I have been trying for the past day or so to load a simple Google Map into a thickbox control. Thickbox is a nice and very simple way to load up popups and images for your site, and you can read all about it and get it here.

Problem: At first I tried to load it via the thickbox AJAX method, but that didn't work for me - for, I think, AJAX reasons (I think you are limited in making AJAX calls from an AJAX call - I was trying to load, via thickbox, a page that had GoogleMaps on it, which would, of course, use AJAX to draw the map - or something like that - which I think is not allowed). So, I decided to embed the GoogleMaps into a hidden DIV on the page, and use the inline thickbox method. This is where the real trouble occurred, and I've noticed that others had this same issue - that the map would either not draw completely, or would be centered on the wrong area. Basically, I think this is because the DIV, when hidden (using the display:none style), has a height and width of zero (or at least Google Maps uses this setting to make the default map draw).

Solution: As I write this, I can't believe this solution wasn't out there. All you need to do is, when initializing the map, be sure to use the opts.size argument in the GMap2 class. So, my code for using thickbox (I call the actual thickbox function instead of using the class="thickbox" in a link method) looks like this (I'm not an incredibly saavy javascript programmer - please excuse any unconventional usage here, but you get the idear - I am loading a map with a marker and with the terrain turned on):

//this is primary function that is called -
//from an onclick event in a link:
function gload(lat,lon,gheight,gwidth){
if(mapload(lat,lon,gheight,gwidth)){ 
  //if so, then make the thickbox call:
   // opens the map_window div into thickbox
    tb_show('quick view map',
  '#TB_inline?height=400&width=450&inlineId=map_window',true);
}
}

function mapload(lat,lon,gheight,gwidth) {
if (GBrowserIsCompatible()) {
 //this is the construct you need to use to get the map to display correctly:
 var map = new GMap2(document.getElementById("map_window"),
    {size: new GSize(gwidth,gheight)});  //this is where the height and width are set.
 map.removeMapType(G_HYBRID_MAP);
 map.addMapType(G_PHYSICAL_MAP);
 var mapControl = new GMapTypeControl();
 map.addControl(mapControl);
 map.addControl(new GSmallMapControl());
 map.setCenter(new GLatLng(lat,lon),13,G_PHYSICAL_MAP);
 // Add marker
 var point = new GLatLng(lat,lon);
 map.addOverlay(new GMarker(point));
 return true;
}
}

And then, somewhere on your page, add a hidden (or rather, display:none) DIV element (in this case with the id=map_window), and call that gload function from a link or whatever you want. Of course, it goes without saying, and I'm saying it anyways, that you'll need the google maps key and script call on your page, plus the thickbox script calls. But, I've tested this in both firefox and IE, and things seem to be working.

If you have any other ideas or experience other issues with this type of thing, let me know in the comments.

Also, once I have this running live on my production work site, I'll post up a link. Right now it's on my development, for my eyes only, server.

UPDATE: woo a link: http://kgsweb.uky.edu/DataSearching/CSLib/CSLibSearch.asp this is a core and sample library search, and if you want to see the map thing, perform a search (um, choose "search by quadrangle" and pick "Adairville" - that should work). On the results page, click the "google map view" in the first column. Hope it works for you!