How to center a google gadget (or ajax load it)

I came across this problem myself when trying to insert the “Directions” gadget from Google Maps into a website. Googling the problem “center google gadget on page” shows that there are a number of other people looking for a solution to this too, and no one seems to have the right answer. Well I found it. Here goes.

1. Paste the generated script tag for the google gadget in a separate file (for example, for the directions gadget, I created a file called “directionsgadget.html”).
2. Wrap the script tag in a div tag. Look at the values sent in the script tag and find the ones that set the height and width of the gadget. In the directions script I found:
   &w=320&h=55
   Set the inline style of the div tag such that the div’s width is equal to or slightly larger than the gadget’s width, and you are going to center this div using the margin property, like so:
   <div style=”width:325px;margin:0 auto;”>
   <script …. />
   </div>
3. On the page where you want the gadget, add an iframe where you want the gadget to appear and set the src attribute to point to the file that you have just created (the one with the div-wrapped script tag for the gadget), and set the inline style of the iframe so as to center it pretty much the same way we did with the div. Like this:
   <iframe src=”path/to/directionsgadget.html” style=”width:330px;margin:0 auto;text-align:center;”></iframe>
4. Voilà! You have your gadget and you have it centered!LOADING VIA AJAX PROBLEM SOLVED USING THIS SAME METHOD:
5. Have you ever tried loading via ajax contents that contain a google gadget, and you’re not seeing your gadget?
   Guess what. This IFRAME method of loading the gadget fixes that.
   The reason it doesn’t load when you are loading via ajax is that you can’t load script tags that point to external sites via ajax because of cross-site scripting limitations in browsers (a good security measure). BUT… if you put your script tag in a separate file, and load it into your contents using an iframe… SHABAM! Your gadget is loaded even when your contents are loaded via ajax! You have overcome the cross-site scripting limitations!