Intégrer des cartes Google Maps dans un site Joomla! avec Phoca Maps

phoca-mapsPhoca Maps est un composant qui vous permet d'afficher des cartes Googles Maps sur votre site Joomla!. Ce composant est assez simple, son but est de vous permettre de créer et d'afficher rapidement des cartes sur votre site.

Installation de Phoca Maps

Phoca Maps est un composant qui s'installe comme n'importe quelle extension Joomla!.

En deux mots, vous allez devoir télécharger l'extension sur le site de l'auteur (en prenant soin de télécharger la version correspondant à votre version de Joomla!) puis de l'installer en vous connectant à votre administration, et en allant dans Extensions → Gestion des extensions → Installation → Onglet Archive à envoyer :

Gestion des extensions Joomla!

Joomla! - Gestion des extensions

Sélectionnez l'archive que vous avez téléchargée (1), puis cliquez sur le bouton Envoyer & Installer (2).

L'installation nécessite quelques instants, puis, si tout se déroule correctement, vous obtenez un message de succès.

Phoca Maps en français

Par défaut, Phoca Maps est installé en anglais. Si vous souhaitez l'utiliser en français, vous devez télécharger les fichiers de langue ci-dessous :

Ce pack de langue s'installe très simplement via l'administration de Joomla!, comme vous installeriez n'importe quelle extension.

Une fois l'installation de Phoca Maps effectuée et les fichiers de langue placés, vous pouvez vous connecter à votre administration, et vous rendre dans Composants → Phoca Maps. Vous arrivez sur le panneau d'administration de Phoca Maps :

Panneau d'administration Phoca Maps

Panneau d'administration Phoca Maps 

1 - Un lien direct vers le panneau d'administration de Phoca Maps.

2 - Un liens vers vos cartes.

3 - Un lien vers vos marqueurs.

4 - Un lien vers vos icônes.

Créer une carte avec Phoca Maps

Pour créer une carte avec Phoca Maps, c'est très simple. Cliquez simplement sur le lien de menu Cartes, vous arrivez sur la page suivante :

Gestionnaire de cartes Phoca Maps

Cartes Phoca Maps

Cliquez simplement sur le bouton Nouveau, vous arrivez sur la page suivante :

Nouvelle carte Phoca Maps

Nouvelle carte Phoca Maps

1 - Vous devez donner un nom à votre carte.

Vous devez entrer une latitude (2) et une longitude (3). Cela peut être fait simplement en cliquant sur le bouton Régler les coordonnées (4).

5 - Vous devez régler un niveau de zoom. Cela peut également être fait via le bouton Régler les coordonnées (4).

6 - Vous devez donner une largeur à votre carte.

7 - Vous devez donner une hauteur à votre carte.

8 - Vous pouvez donner une langue à votre carte.

9 - Vous pouvez donner une description.

10 - Vous retrouvez quelques options de publication.

11 - Vous pouvez paramétrer le design (ajouter une bordure et régler sa couleur).

12 - Vous retrouvez plusieurs paramètres avancés (type de carte, échelle, etc).

Une fois que tout est bon, vous pouvez cliquer sur le bouton Enregistrer et Fermer.

La boutique

Joomla! 3 Le livre pour tousJoomla! 3 Le Livre Pour Tous
est écrit pour toutes les personnes qui débutent avec Joomla!, ou qui possèdent déjà quelques connaissances avec les versions précédentes, et qui souhaitent construire et entretenir un site web sans avoir à entrer dans le code.

Ajouter des Marqueurs sur une carte Phoca Maps

Une fois que vous avez créé votre carte, vous allez pouvoir ajouter des marqueurs sur cette carte. Pour cela, rendez-vous sur le panneau d'administration de Phoca Maps → Marqueurs, puis cliquez sur le bouton Nouveau. Vous arrivez sur cette page :

Nouveau marqueur Phoca Maps

Nouveau marqueur sur une carte Phoca Maps

1 - Vous devez donner un nom à votre marqueur.

Vous devez entrer une latitude (2) et une longitude (3). Cela peut être fait simplement en cliquant sur le bouton Régler les coordonnées (4).

5 - Vous devez sélectionner la carte sur laquelle le marqueur sera appliqué.

6 - Vous pouvez entrer une description qui sera affichée dans une fenêtre popup lors d'un clic sur le marqueur.

7 - Vous retrouvez des options de publication.

8 - Vous pouvez choisir le design du marqueur en sélectionnant l'icône à utiliser.

Une fois que tout est bon, vous pouvez cliquer sur le bouton Enregistrer et Fermer.

Afficher une carte sur le Frontend de Joomla!

Une fois que votre carte est réalisée et que vous avez placé vos marqueurs, vous allez pouvoir l'afficher sur le Frontend de votre site. Pour faire cela, nous allons créer un élément de menu.

Rendez-vous donc dans Menu, sélectionnez le menu de votre choix, puis cliquez sur le bouton Nouveau.

Elément de menu Phoca Maps

Elément de menu Phoca Map

1 - Vous devez donner un titre à votre élément de menu.

2 - Vous devez sélectionner le type Phoca Maps → Vue Carte.

3 - Vous devez sélectionner votre carte.

Une fois que tout est bon, vous pouvez enregistrer et vous rendre sur le Frontend de votre site pour afficher la carte.

Comment personnaliser les icônes Phoca Maps

Par défaut, le composant Phoca Maps propose plusieurs icônes. Si celles-ci ne vous suffisent pas, ou si vous souhaitez utiliser des icônes personnalisée, cela est facilement possible.

Pour cela, rendez-vous sur le panneau d'administration de Phoca Maps, puis dans Icônes, vous arrivez sur la page suivante :

Gestionnaire d'icônes Phoca Maps

Gestionnaire d'icônes Phoca Maps

Ici, vous retrouvez les différentes icônes disponibles. Pour ajouter une nouvelle icône, cliquez simplement sur le bouton Nouveau, vous arrivez sur la page suivante :

Nouvelle icône Phoca Maps

Nouvelle icônes Phoca Maps

Notez cet article:
3
OSMap : Le nouveau Sitemap gratuit pour Joomla!
Alledia revisite xMap composant de sitemap pour Jo...

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
mardi 26 septembre 2017
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.