lundi, 05 novembre 2012 00:00

Tutoriel - Carte Google Map sur un site Joomla

Contenu du tutoriel :

  • Création, modification et enregistrement d’une carte Google Maps dans un compte Google
  • Placement et personnalisation de marqueurs
  • Cadrage de la carte
  • Intégration de la carte dans un site Joomla
  • Niveau : débutant
  • Note : vous devez installer un module qui permettra l’intégration de code comme Flexi Custom Code

Différentes solutions pour intégrer un plan Google Maps interactif à un site Web Joomla :

  • Composant dédié Joomla : vous pouvez installer une extension dédiée comme le plugin Joomla Googlemaps, mais qui présente l’inconvénient d’être lourd (chargement de fichiers javascript supplémentaires, etc.) et qui demande un certain temps d’apprentissage dû aux nombreuses fonctionnalités offertes. C’est donc l’artillerie lourde, passez votre chemin si vous ne souhaitez qu’un plan Google basique pour vos visiteurs…
  • Création manuelle : il s’agit de créer une carte sur Google Maps pour l’insérer dans votre site ensuite. L’avantage est ici d’avoir une solution plus légère et de ne pas se fourvoyer dans les entrailles d’un composant pour le configurer.

Ce tutoriel concerne la seconde solution qui permet :

  • de créer autant de cartes que souhaité,
  • de sauvegarder les cartes créées,
  • d' ajouter plusieurs repères sur la même carte (les pins),
  • de zoomer et déplacer la carte telle que l’on souhaite l’intégrer sur le site,
  • de dimensionner la carte en fonction des besoins,
  • de prévisualiser le résultat, etc.

Étape 1 ) Création de la carte sur Google Map

  1. Connectez-vous à votre compte Google et rendez-vous sur Google Maps.
    Note : si ce n’est pas déjà fait, créez-vous un compte Google pour pouvoir sauvegarder vos cartes.
  2. Cliquez sur le bouton " Mes adresses " en haut à gauche, puis sur le bouton rouge " CRÉER UNE CARTE".
    Renseignez un titre et une description claire à votre carte en remplissant les champs dédiés, cochez l’option de confidentialité "publique".
  3. En haut de la carte sont présentés divers boutons
    • La main : permet de se déplacer sur la carte
    • Le marqueur (pin) : permet de placer un marqueur sur votre carte (standard ou personnalisé)
    • Le tracer : permet de tracer une ligne ou une forme sur la carte
      Tutoriel Google Maps Joomla - Boutons carte
  4. Entrez l’adresse à localiser dans le champ de recherche du haut et validez.
    Placez un marqueur
    en cliquant sur l’icône correspondante, donnez un titre et une description au marqueur. Modifiez l’aspect du texte et du marqueur comme vous le souhaitez via les options proposées.
    Cliquez sur "OK" pour terminer le placement de marqueur. Placez autant de marqueurs que vous le souhaitez.
    Tutoriel Google Maps Joomla - Placement de marqueurs
  5. Cliquez sur " Enregistrer " en haut à gauche, puis sur " OK " pour terminer la création de la carte. Pour la modifier, cliquez sur le bouton " Mes adresses ", puis sur le nom de la carte. Cliquez sur le bouton rouge " MODIFIER " pour effectuer les changements désirés.
  6. Cliquez sur le bouton Liens (avec un maillon), puis sur le lien " Personnaliser et prévisualiser la carte intégrée ".
    Tutoriel Google Maps Joomla - Modifier carte
  7. Un popup s'affiche, cochez l’option " Personnalisée " et renseignez les dimensions souhaitées pour la carte. Déplacez-vous et zoomez dans la carte pour bien cadrer les emplacements des différents marqueurs.
    Lorsque la carte vous convient, récupérez le code HTML généré.
    Tutoriel Google Maps Joomla - Personalisation du plan

Étape 2) Intégration du plan Google Map dans un module Joomla

  1. Installez l’extension Flexi Custom Code.
  2. Créez un nouveau module de type Flexi Custom Code et renseignez tous les champs nécessaires (n'oubliez pas de publier le module).
  3. Dans le champ position, entrez un nom pour la position de votre module, par exemple " ma_googleMap ".
  4. Dans la partie " Insert Code " à droite, coller le code HTML généré sur Google Maps et enregistrez.

Étape 3) Intégration de la carte dans une page du site

  1. Rendez-vous sur la page où vous souhaitez intégrer la carte et basculez l’éditeur en mode HTML.
    Tutoriel Google Maps Joomla - Intégration de la carte
  2. Intégrez le module qui contient la carte avec le code suivant sans les espaces
    <div>{ loadposition ma_googleMap }</div>
    Enregistrez l’article et rendez-vous sur la page où la carte Google Map doit apparaître. Rafraichissez la page, le plan est affiché.

 

Normalement, c’est tout bon ;)

5 Commentaires

Laissez un commentaire

Indiquer les informations obligatoires (*).
Le code HTML n'est pas autorisé.