logo image
AddThis Social Bookmark Button

Visualisation d'une page Webjax

Déplacement et animation de cartes
icone addfav
Si vous suivez la présentation des GMaps sur Webjax dans l'ordre, vous devez commencer à être familier du centrage des cartes par rapport à des points (latitude, longitude).
Cette page comme l'indique son titre présente des exemples qui permettent de déplacer le point de centrage des cartes GMaps dynamiquement en jouant sur un "timeout" ou en français un délai de répétition d'évènement qui détermine la fréquence de rechargement du centre de la carte .

Ces recentrages/relocalisations de cartes peuvent être utilisées par exemple dans des applications ayant pour objectfi de présenter un parcours sportif ou plusieurs points d'étapes sont présents, peuvent être utilisées pour présenter toutes les agences d'une chaîne , etc....

Pour considérer et comprendre cet exemple vous devez être à même de travailler à partir de tableaux javascripts associatifs.
Si vous ne possédez pas cette compétence vous pouvez visiter l'excellente référence SelfHtml qui vous permettra de comprendre et d'utiliser ce type de variables.





Exemple simple de déplacement de carte GMaps


Ce premier exemple vous permet de charger une carte GMaps qui se centrera par défaut sur la ville de Paris.
Au bout de 15000 millisecondes soit 15 secondes, la carte se recentrera automatiquement sur la ville de Colombes(92, France).

L'exemple est testable ci après :

Utilisation de l'exemple #00
ZONE DE CHARGEMENT DE LA CARTE GMAPS



Le code source de cet exemple est recopié ci après avec dans l'ordre :
  • le code javascript permettant de déplacer la carte de paris à colombes
  • le code html du bouton appelant la fonction javascript de déplacement de cartes



Le code html du bouton appelant la fonction Javascript :




Exemple personnalisé de cartes animées


Ce second exemple présente une carte de France qui se déplace entre les coordonnées de différentes villes.
Le script est basé sur le même délai de rechargement que l'exemple #00 de cette page afin de permettre de bien distinguer le déplacement entre les chargements de zones.

Utilisation de l'exemple #01
ZONE DE CHARGEMENT DE LA CARTE GMAPS



Le code source de cet exemple est présenté ci après avec dans l'ordre :
  • le code javascript définissant les points et la fonction de rechargement de la carte GMaps
  • le code html du bouton appellant la fonction javascript d'animation de la carte GMaps



Le code HTML du bouton d'action :

ico com Aucun commentaire enregistré