Eine Karte von Google Maps v3 versteckt halten und bei Bedarf anzeigen

Question

Gibt es eine Möglichkeit, zu verhindern, dass eine Google Maps (JS, v3) -Karte von Anfang an angezeigt wird? Ich mache eine Vorverarbeitung und möchte meinen "Loading" -Spinner zeigen, bis alles gut geht (eloquenter ausgedrückt, verstecke die Karte - zB den Container div - bis die gesamte Vorverarbeitung abgeschlossen ist - an welchem ​​Punkt , zeige die Karte).

Das Verbinden des idle Ereignisses der Karte hilft nicht viel, da die Karte bereits angezeigt wird, wenn dieses Ereignis eintritt.

Ich weiß, dass der Behälter div durch GMaps nach dem Laden Inline-Stil bekommt, meine erste Idee, das style Attribut (beim Hören auf die idle Ereignis) zu räumen, aber es wäre interessant zu sehen, ob es einen Weg gibt, die Karte zu erstellen und nicht anzuzeigen, bis die gesamte Vorverarbeitung abgeschlossen ist.

Vielleicht mithilfe eines Arguments zum new google.maps.Map Konstruktor oder MapOption?

Irgendwelche Gedanken dazu?

Vielen Dank im Voraus!

Answer 1

Denken Sie auch daran nennen:

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

wenn Sie die Größe des <div> geändert haben. A display:none<div> hat keine Größe.

Answer 2

besseren Weg:

gmap.redraw = function() { 
    gmOnLoad = true; 
    if(gmOnLoad) { 
     google.maps.event.trigger(gmap, "resize"); 
     gmap.setCenter(gmlatlng); 
     gmOnLoad = false; 
    } 
} 

und in Show Click-Ereignis:

$("#goo").click(function() { 
    if ($("#map_canvas").css("display") == "none") { 
    $("#YMapsID").toggle(); 
    $("#map_canvas").toggle(); 
    if (gmap != undefined) { 
     gmap.redraw(); 
    } 
    } 
}); 

Answer 3

je nachdem, was Sie einen anderen posibility tun mehrere bools Sie auf true gesetzt haben könnte, wenn jeder Vorgang abgeschlossen ist .

Zum Beispiel:

, wenn Sie einen geocode Dienst ausgeführt haben, die Sie warten möchten, können Sie ein var GeoState

und im Ergebnis ein Teil der Geocoder Satz GeoState auf true genannt haben, dann haben eine zeitgesteuerte Funktion überprüfen, ob alle Dienste True zurückgegeben haben, wenn sie haben, machen Sie die Karte sichtbar.

Answer 4

Das funktioniert für mich. Ich benutze die JQuery-Bibliothek.

Answer 5

Oder Sie könnten es einfach wie mit css visablility oder css Opazität verstecken.

$("#GoogleMap").css({ opacity: 0, zoom: 0 }); 
initialize(); 

google.maps.event.addListener(map,"idle", function(){ 
    $('#Loader').hide(); 
    $("#GoogleMap").css({ opacity: 1, zoom: 1 }); 
}); 

Answer 6

dies funktioniert gut für mich, ich benutze Jquery Tabs

setTimeout(function() { 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(new google.maps.LatLng(default_lat, default_lng)); 
     map.setZoom(default_map_zoom); 
    }, 2000); 

om Link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 7

Diese

google.maps.event.addListener(map, "idle", function() 
    { 
     google.maps.event.trigger(map, 'resize'); 
    });