montrer le chargement de l'image pendant le chargement de la carte google

Je suis en utilisant Google Maps Javascript API pour afficher une carte dans mon site avec supplément de marqueurs. C'est l'élément déclencheur

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

Cela fonctionne bien, mais la carte ne prend que quelques secondes. Je suis en train de mettre un chargement de l'image dans la carte de la div comme ceci:

<div id="map_canvas" style="width:700px; height:500px"><img src="/image/ajax-loader.gif" /></div>

Mais l'image ne montre jamais, juste la page blanche jusqu'à ce que la carte montre.

L'image est au travail, parce que si je désactive la carte en fonction de chargement, l'image est là.
Je pense donc que la carte google efface la div avant de la carte est chargé.

Toutes les idées comment montrer un chargement de retour à l'utilisateur lors de l'attente? Je ne pouvais pas trouver une fonction dans l'API...

Je pense que c'est une double question. Il y a des réponses de fournisseurs attitrés de l'API v2 et v3 ici: stackoverflow.com/questions/832692
Je ne pense pas qu'est dupliqué, j'ai édité ma question donc, il ne semble pas dupliqué

OriginalL'auteur Alex Angelico | 2011-02-16

  1. 6

    Vous pourriez essayer d'envelopper la carte div à l'intérieur d'une div, et de définir la div contenant du fond d'avoir une sorte d'animation graphique. En général, j'ai constaté que ce n'est pas une bonne idée de manipuler ou de placer quoi que ce soit à l'intérieur de l'élément que Google Maps utilise que la carte.

    ok, je vais essayer ça, merci!
    Ok, cela a fonctionné: (la carte va dans "map_canvas") ` <div style="width:700 pixels; height:500px; "><img src="images/ajax-loader.gif" /> <div id="map_canvas" style="width:700 pixels; height:500px; top:-25px;"></div> </div>`

    OriginalL'auteur Matt King

  2. 22

    Il est plus facile d'ajouter un GIF via CSS à l'arrière-plan de la Carte DIV.

    c'est à dire

    html

    <div id="map_canvas"></div>

    css

    #map_canvas {background: transparent url(images/ajax-loading.gif) no-repeat center center;}

    le chargement GIF restera visible jusqu'à ce que la carte est chargé. Très pratique si votre utilisation du capteur pour obtenir l'emplacement actuel, car cela prend du temps. Dès que google maps est prêt à remplir #map avec ses propres images, vous ne serez pas en mesure de voir le chargement de fichiers GIF.

    OriginalL'auteur Andrew Killen