Trying to figure out a way to have a Google map pop-up from inside Facebook.

views:

418

answers:

+3 Q:

Trying to figure out a way to have a Google map pop-up from inside Facebook.

Here's the deal: I have an fb app I wrote mostly for my own benefit. (you can play with it at http://apps.facebook.com/bicyclelog/log.php?uid=0 if you like...)

Anyway, the problem is this: Facebook lobotomizes Javascript. Google Maps is Javascript based. Therefore, I have to put the map in an iFrame. But FB puts restrictions on iFrames, so I basically have to open a new page to display the map.

What I'd really like to do, however, is have the map pop-up, instead. Ideally, it would look like FB's other dialogs...

Can anyone suggest an approach? I'm a good C & device driver coder, but my PHP skills are kind of at the cargo-cult stage....

+3 A:

You could put an fb:iframe inside of an FBJS Dialog, and have the src be pointed to a non-facebook-authenticated page on your server (using your callback address, not apps.facebook.com/blah) that renders the map.

This will probably give you the same problems you were having with just using an iframe but it is really the only option because of how FB mangles JavaScript.

Dustin Fineout 2009-06-18 19:57:26

Are you sure that a dialog can contain an iframe? You're right, that would probably work - I'll have to look into it.Thanks.

Mike Heinz 2009-06-19 11:36:31

I've never come across any FBML that can't render within a Dialog, but I haven't actually tried the iframe. If you wouldn't mind posting about your results, I would definitely like to know how it works out for you.

Dustin Fineout 2009-06-19 12:13:41

BTW - the final result is that this is still my preferred solution in the long term, but in the near term it isn't going to work - the dialogs have a fixed size; I can't make one large enough to contain the google map.

Mike Heinz 2009-06-22 00:41:25

I thought this might be an issue, as I had run up against this restriction before. It is actually possible to change the width of the dialog using javascript, but it can be tricky to get a reference to the element using FBJS. You need to work along the lines of putting an element in the div with an ID you can reference, then using the getParent() method on that element until you reach the dialog element. It would probably help to use FireBug to help identify the element.

Dustin Fineout 2009-06-22 01:32:40

ansaurus

tags:

views:

answers:

Trying to figure out a way to have a Google map pop-up from inside Facebook.

related questions