Friday, April 25, 2008

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!

14 comments:

Anonymous said...

Very cool! I actually must thank you for pointing me towards ThickBox! I wasn't aware of it, per se, but had seen something similar to it but intended for image galleries (Lightbox). I've put Lightbox to use a few times and love it. Now it's time to replace some clunky home-brewed code that I put to use to high/show divs (instead of opening new windows) and replace it with the neat and tidy Thickbox! Thanks!

doug said...

Oh good! Yeah, I tried using lightbox before, but it didn't allow for ajax calls or something - I can't remember, but thickbox is much nicer - and really, really easy to use (just put that class tag in the url and you are off to the races). Also, the javascript and css that it comes with is relatively easy to read and fairly well commented, so it's possibly to tweak it without too much effort. If you need any tips on that, let me know, because I've made some edits to it to make it work exactly how I want.

Reid said...

This is a great idea to share the things you've figured out on your blog. It really helps out a whole lot. I keep wanting to do things like that but just never seem to make the time to actually write it all out.

Now I just need to figure out what this Thickbox business is...

doug said...

Reid: yeah, I'm gonna try to do this more often - it helps me to remember what I've done, and I know that I would appreciate finding this type of info from someone doing the same.

And: 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.

Unknown said...

I was having quite a time trying to centre a Google Map in the Thickbox -- the size attrs did the trick. Thanks for posting your results.

Alex

Anonymous said...

I had the centering issue as well. Your fix worked for me. Thanks!

Anonymous said...

Thank you sooooo much.

Anonymous said...

Cheers - I was having a terrible time opening my map in thickbox - I wasted a lot of time thinking there was something wrong with the jQuery script I had to mange the markers...

Devin said...

Do have a link to an example of this? I am setting one up on www.kerrpacific.com/contact.html. Works fine in Firefox, but no map display in IE.

Thanks.

doug said...

try here (long link):

http://kgsweb.uky.edu/DataSearching/CSLib/CoreResults.asp?placename=ADAIRVILLE&placeAmt=multiple&resultsDisplay=all&areatype=quad&srchType=core

and click on "google map view" for one of the rows.

Jean said...

Thank you so much. I had no idea what was wrong with my code!

Anonymous said...

Thanks very much for this! You save me!

Hans said...

Sorry rduht, I have to disagree with you there. Even if the priest is throwing flyff money out a bible, Doug's solution of using the opts.size argument is right on. It's true that 2moons power leveling can get the archlord gold, but if you're already using Thickbox then the whole dog clothes and last chaos gold thing just ends up feeling like a hacky workaround, and a clunky one at that.

Aaron said...

Thanks!! saved me hours!