web-dev-qa-db-fra.com

Gardez une carte Google Maps v3 masquée, affichez-la si nécessaire.

Est-il possible d'empêcher l'affichage d'une carte Google Maps (JS, v3) dès le début? Je suis en train de faire un pré-traitement et je voudrais montrer ma roulette 'Chargement' jusqu'à ce que tout soit prêt à l'emploi (plus éloquemment, cachez la carte - par exemple le conteneur div - jusqu'à ce que tout le pré-traitement soit terminé - puis , montre la carte). 

Connecter l'événement idle de la carte n'aide pas beaucoup, car la carte est déjà affichée lorsque cet événement survient.

Je sais que le conteneur div est aligné par GMaps après le chargement. Ma première idée était de supprimer l'attribut style (tout en écoutant l'événement idle), mais il serait intéressant de voir s'il existe un moyen de créer la carte. et ne l'affiche pas avant que tout le prétraitement soit terminé.

Peut-être en utilisant un argument pour le constructeur new google.maps.Map, ou un MapOption?

Des idées à ce sujet?

Merci d'avance!

google-mapsgoogle-maps-api-3
31
Dr1Ku

Rappelez-vous également d'appeler:

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

si vous avez changé la taille du <div>. Un display:none<div> n'a pas de taille.

69
skarE

Ou vous pouvez simplement le cacher comme avec CSS Visablility ou CSS opacité 

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

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

Cela fonctionne pour moi. J'utilise la bibliothèque JQuery.

$(document).ready(function(){
    $('#Checkbox').click(function(){
        $('#googleMapDiv').toggle();
        initialize(); // initialize the map
    });
});
4
Gabriel Ramirez

Ça va marcher

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

cela fonctionne très bien pour moi, j'utilise les onglets jquery

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 this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

2
Karim Samir

une autre façon d'afficher la carte masquée lors du premier rendu de la carte par <div> consiste à définir le style: visibilité.

Lorsque caché pour la première fois, utilisez visibility = hidden; pour montrer l'utilisation visibility = visible

la raison en est: Visibilité: masqué signifie que le contenu de l'élément sera invisible, mais l'élément reste dans sa position et sa taille d'origine.

1
long

en fonction de ce que vous faites, une autre possibilité pourrait consister à avoir plusieurs bools que vous définissez sur true à la fin de chaque processus.

Par exemple:

si vous souhaitez attendre un service de géocodage en cours d'exécution, vous pouvez utiliser un fichier var appelé GeoState.

et dans la partie résultat du géocodeur, définissez GeoState sur true, puis faites vérifier par une fonction chronométrée si tous les services ont rendu true, lorsqu'ils ont rendu la carte visible.

1
idea

meilleure façon:

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

et dans show click event:

$("#goo").click(function() {
  if ($("#map_canvas").css("display") == "none") {
    $("#YMapsID").toggle();
    $("#map_canvas").toggle();
    if (gmap != undefined) {
        gmap.redraw();
    }
  }
});
1
Крайст