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:
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икони
Cet article Ajouter un message de chargement d’une map google : tilesloaded Events est apparu en premier sur Icare Design.Com.