Ajouter un message de chargement d’une map google : tilesloaded Events

Notre équipe vient d’être confrontée à une problématique technique lors de l’intégration de Google Maps dans le site d’un de nos client.

Le besoin est le suivant :
Sur une page d’affichage le Lien « Imprimer » fonctionne comme suit : Au clic sur le lien 2 pop-up doivent s’ouvrir :

  • Le pop-up d’impression du navigateur doit s’afficher et être visible par l’utilisateur :
  • Un pop-up reprenant toutes les informations de la fiche s’affiche comme suit sous la fenêtre d’impression:
Popup  à afficher

Popup à afficher

Le besoin a été découpé en deux parties :

1.      Afficher le popup.

2.      Lancer l’impression automatiquement.

La solution technique  que nous avons adoptée est la suivante :

1.      L’affichage du  pop-up se fait via l’utilisation de la bibliothèque javascript highslide  http://highslide.com/

2.      L’impression du pop-up utilise la fonction javascript Print(). Pour l’automatiser, nous l’avons associé à l’événement “load“  du window.

On a implémenté la solution, le popup s’affiche, mais la carte google n’apparait pas et l’impression nous donne un espace blanc !

Après quelques investigations, voici l’explication du problème :

Le popup est composé de plusieurs fragments indépendants, un pour la carte, un autre pour les nouveautés et le dernier pour les informations.  Le chargement de la map a été appelé à la fin du chargement de touts les fragments en utilisant un gestionnaire d’événements javascript. Le but est de ne pas pénaliser l’affichage à cause d’une connexion lente !

ð  Dans ce cas de figure deux appel sont effectuer, lors de l’affichage du popup : L’affichage de google map et l’impression. è google map est pénalisé.

Le gestionnaire d’événement que nous avons choisi est l’objet : Event de la librairie www.prototypejs.org Event.observe(window, ‘load’, ‘fonction d’initialisation de la map’);

Pour palier à ce problème plusieurs solutions ont été testées : map.isloaded()… faire une boucle d’attente, mais le résultat n’était pas concluant.

Finalement, nous avons décidé de revenir à la source :La doc API Google.  Nous y avons trouvé notre besoin : Le gestionnaire d’événement de l’API 2 nous offre la possibilité d’écouter l’événement : tilesloaded. Cet événement indique tout simplement la fin de chargement de la carte Google.

Intégration faite sur l’exemple suivant :

if (GBrowserIsCompatible()) {

//load up the map
var container = document.getElementById(« map_div »);
var map = new GMap2(container);
map.setCenter(new GLatLng(51.89685043436763, -1.15156888961792), 17);

//add the ‘loaded’ listener
GEvent.addListener(map, ’tilesloaded’, function(){
alert(‘La carte est chargée’)
});

}

Nous avons testé cette solution sur un exemple simple et cela a bien fonctionné. Cependant, l’intégration dans le vrai environnement réel a posé problème.

L’évènement tilesloaded n’est jamais catché.  D’autres événement sont bien récupérées mais pas celui la.

Après quelques recherches sur internet nous avons fini par trouver  la cause : l’événement  tilesloaded  est incompatible avec la bibliothèque prototype.

Nous avons viré cette biblithèque, et tout a fonctionné comme il faut.

Liens :

http://code.google.com/p/gmaps-api-issues/issues/detail?id=2204

http://www.oxfordnewmedia.com/maps/loadingMsg.html

http://code.google.com/intl/fr/apis/maps/articles/static+js.html

http://code.google.com/intl/fr/apis/maps/documentation/javascript/v2/reference.html#GMap2

http://www.devcomments.com/Prototype-breaks-tilesloaded-event-Google-Maps-API-at109353.htmикони

Leave a comment