Come centrare un gadget Google (o caricarlo via Ajax)

Mi sono imbattuto personalmente in questo problema quando ho cercato di inserire il gadget “Directions” di Google Maps in un sito web. Cercando su Google il problema “center google gadget on page” si vede che ci sono parecchie altre persone che cercano una soluzione anche a questo, e nessuno sembra avere la risposta giusta. Be’, io l’ho trovata. Ecco come.

1. Incolla il tag script generato per il gadget Google in un file separato (per esempio, per il gadget delle indicazioni, ho creato un file chiamato “directionsgadget.html”).
2. Avvolgi il tag script in un tag div. Guarda i valori inviati nel tag script e trova quelli che impostano l’altezza e la larghezza del gadget. Nello script delle indicazioni ho trovato:
   &w=320&h=55
   Imposta lo stile inline del tag div in modo che la larghezza del div sia uguale o leggermente maggiore della larghezza del gadget, e centrerai questo div usando la proprietà margin, così:
   <div style=”width:325px;margin:0 auto;”>
   <script …. />
   </div>
3. Nella pagina in cui vuoi inserire il gadget, aggiungi un iframe nel punto in cui vuoi che il gadget appaia e imposta l’attributo src in modo che punti al file che hai appena creato (quello con il tag script del gadget avvolto nel div), e imposta lo stile inline dell’iframe in modo da centrarlo più o meno nello stesso modo in cui abbiamo fatto con il div. Così:
   <iframe src=”path/to/directionsgadget.html” style=”width:330px;margin:0 auto;text-align:center;”></iframe>
4. Voilà! Hai il tuo gadget e lo hai centrato!PROBLEMA DEL CARICAMENTO VIA AJAX RISOLTO USANDO QUESTO STESSO METODO:
5. Hai mai provato a caricare via AJAX contenuti che contengono un gadget Google, senza vedere comparire il tuo gadget?
   Indovina un po’. Questo metodo con IFRAME per caricare il gadget risolve il problema.
   Il motivo per cui non viene caricato quando carichi via AJAX è che non puoi caricare via AJAX tag script che puntano a siti esterni a causa delle limitazioni del cross-site scripting nei browser (una buona misura di sicurezza). MA… se metti il tuo tag script in un file separato e lo carichi nei tuoi contenuti usando un iframe… SBAM! Il tuo gadget viene caricato anche quando i tuoi contenuti vengono caricati via AJAX! Hai superato le limitazioni del cross-site scripting!