Come forzare un ridisegno sull'API di Google Maps?

Question

utilizzando jQuery per costruire e aggiornare il contenuto di un'API di Google Maps controllo personalizzato overlay, Google Maps a volte non trae i contenuti aggiornati.

Main.overlay = $('<div><div style="background:white"><div id="overlay"></div></div></div>').detach(); 
Main.map.controls[google.maps.ControlPosition.TOP_LEFT].push(Main.overlay[0]); 

...

$('#overlay').html('New content'); 

Ridimensionare la mappa ridimensionando la finestra farà sì che il nuovo contenuto da visualizzare. Mousing sul nuovo contenuto, il cursore cambia come se il nuovo contenuto fosse lì. Ho provato

google.maps.event.trigger(Main.map, 'resize'); 

per innescare un ridisegno, ma dal momento che la mappa non è effettivamente cambiato dimensione, sto cercando di indovinare che è ottimizzato via.

Come posso dire di Google Maps per forzare un ridisegno? O c'è qualcosa nella funzione jQuery .html() che potrebbe causare questo?

Questo problema si verifica su Safari 7.0.2 (9537.74.9) su Mac OS X 10.9 e sul simulatore iPhone, ma non si verifica in Firefox, Chrome o su iOS 6 e iPad 2.

Ispezione il DOM mostra che le modifiche vengono apportate come desiderato, semplicemente non vengono visualizzate. A seguito di suggerimenti a Force DOM redraw/refresh on Chrome/Mac aggiungendo

$('#overlay').hide().show(0); 

opere in tutto quello che sembra essere un bug Webkit.

Answer 1

ho provato un sacco di modi di ridisegnare la mappa utilizzando l'API e jQuery, ma nessuno ha lavorato per me. Ho risolto il problema, causato da eventi asincroni non ancora completati, utilizzando l'evento 'idle', usandolo un po 'come un callback.

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    // do something when all other changes to the map have completed 
});