My Maps location : emplacements et catégories

1. Obtenez une clé API Google Maps

Chaque fois que vous utilisez les API Google Maps, si votre domaine a été créé après le 22 juin 2016, vous devez inclure une clé, pour valider votre demande.
Obtenez une clé et activez l'API : https://developers.google.com/maps/documentation/javascript/get-api-key

Plus d'informations: https://developers.google.com/maps/documentation/javascript/usage?hl=en

La première étape consiste à créer un projet, puis à taper le nom du projet.

 

create-api-key

 

Si je veux autoriser toutes les demandes de mydomain, alors le modèle à suivre est * .joomunited.com / *
Si vous voulez simplement autoriser un seul domaine par exemple mydomain.com, le modèle serait joomunited.com/*


Sur un environnement localhost, vous pouvez mettre n'importe quelle clé valide et cela fonctionnera sans référence de domaine.

 

domaine-api-pattern


La clé API est alors générée, c'est la clé que vous devez copier pour l'ajouter à l' My Maps location .

 

créé par api

 

Ajoutez la clé à l' My Maps Location .

Dans la Composants > My Maps Location > Option , vous pouvez ajouter une clé dans la configuration.

 

cartes-configuration

 

Collez la clé.

 

add-api-key

 

CV étape par étape:


Les étapes que je suis sont donc

  • Accédez à la console API Google
  • Créer ou sélectionner un projet
  • Cliquez sur Continuer pour activer l'API et tous les services associés
  • Sur la page Informations d'identification, obtenez une clé de navigateur (et définissez les informations d'identification de l'API)
  • Pour éviter le vol de quota, sécurisez votre clé API en suivant ces bonnes pratiques

2. Gérer les catégories de lieux

Les emplacements sont classés en catégories. Ces catégories peuvent être affichées sous forme de filtre dans l'interface ou utilisées comme paramètre prédéfini dans un élément de menu pour charger certains emplacements classés.
 

catégorie-filtre-frontend

 

Si vous avez beaucoup d'emplacements, il est recommandé d'utiliser des catégories.
Vous pouvez créer des catégories et des sous-catégories. Pour créer une catégorie, rendez-vous dans My Maps location > Category et cliquez sur New

 

emplacement-catégorie

 

Ensuite, à partir de l'écran des catégories, vous devrez ajouter un titre et une catégorie parent au cas où vous souhaiteriez créer une sous-catégorie

 

catégorie-parent

 

Vous pouvez également définir un marqueur par défaut pour l'emplacement dans la catégorie à l'aide de l'onglet Sélection des marqueurs

 

catégorie-marqueur

 

Remarque : une catégorie est créée par défaut nommée "Ma catégorie" vous permettant de commencer à ajouter des emplacements directement après l'installation

3. Créez un emplacement

Pour créer un lieu, veuillez vous rendre dans My Maps location > Locations > New

Il y a 3 champs obligatoires:

  • Nom du lieu
  • Catégorie de l'emplacement
  • Détails de l'emplacement (adresse)      

 

Pour l'adresse, vous avez 3 solution pour l'ajouter:

  • Utilisez le champ de recherche (recommandé)
  • Naviguez sur la carte et utilisez le curseur pour pointer un emplacement
  • Remplissez une adresse (doit être valide pour Google Maps)

 

Pour ajouter un lieu avec le moteur de recherche, tapez le nom du lieu que vous souhaitez ajouter.

 

Ajouter un emplacement

 

Lors de la sélection, les champs de latitude et de longitude seront remplis automatiquement. Mes cartes sont également intégrées à Google Places! Cela signifie que vous pouvez rechercher une boutique ou tout autre élément enregistré sur Google Maps, notre composant obtiendra toutes les informations sur le lieu.

 

Google-place

 

 

Vous pouvez également vous déplacer sur la carte et mettre un marqueur directement, le résultat sera le même et vous obtiendrez automatiquement une latitude et une longitude.

 

point de carte

 

Soyez prudent avec le champ d'adresse et le code postal si vous le remplissez manuellement, il doit correspondre à une adresse connue de Google Maps.

 

champs d'adresse

 

Toutes les autres informations du lieu (description, horaires, ...) sont affichées dans la vue détaillée du lieu.

Le lien de contact dans l'édition de détail d'emplacement, est la possibilité d'ajouter un lien de contact, mailto ou URL par emplacement. Sur le frontend, il y aura un bouton de contact qui ouvrira l'URL ou exécutera l'action mailto.

 

9

 

4. Autres informations de localisation

Sur chaque emplacement, vous pouvez ajouter une image et un marqueur. 

  • Image de l'emplacement: l' image sera affichée sous forme de vignette dans l'info-bulle de l'emplacement et à une taille plus grande sur la page de détails de l'emplacement.
  • Utiliser l'icône de catégorie: utilisez l'icône que vous mettez dans le champ de catégorie de mes emplacements sur la carte
  • Arrière-plan du marqueur: choisissez la couleur de votre marqueur d'arrière-plan
  • Le marqueur sera affiché sur la carte sous forme d'icône de marqueur de position. Vous avez également de jolis ensembles de marqueurs pour vos emplacements inclus dans l' extension My Maps Location .
  • Utiliser un lien personnalisé remplacera le lien vers le détail de l'emplacement par une URL personnalisée.

 

marqueur-emplacement-image

 

My Maps location utilise la fonction multilingue native de Joomla. Vous pouvez définir une langue dans des catégories d'emplacement et dans des emplacements. Lors du changement de langue, les emplacements seront filtrés comme tout autre contenu Joomla afin d'afficher le contenu approuvé dans la langue.

 

Langue

 

Le champ de description de l'emplacement est l'un des plus importants.
Il sera affiché sur la page de détail de l'emplacement et, selon le thème, sous forme de texte d'introduction de l'emplacement dans les résultats de recherche. Plus important encore, la description est un éditeur WYSIWYG avec tout le plugin chargé à l'intérieur, cela signifie que vous pouvez tout ce que vous voulez (images, vidéos ...).

 

description de l'emplacement

 

Voici le texte d'introduction affiché dans les résultats de la recherche de position.

 

résultats de localisation de texte

 

Le champ de balise est le même système de balises que Joomla. Vous pouvez ajouter des balises et des sous-balises, puis les charger dans le frontend en tant que filtre. Pour gérer toutes les balises, il suffit de charger le composant de balise Joomla : Composant de menu > Balises
Sur le frontend, selon la configuration, les balises peuvent être affichées sous forme de case à cocher (comme ci-dessous) ou sous forme de liste déroulante.

 

filtre-étiquette

 

My Maps Location a des champs supplémentaires pour remplir les méta-informations (pour les moteurs de recherche). Ces champs sont chargés sur la page de détail de l'emplacement.

 

Méta-information

 

5. Afficher les emplacements sur le frontend

Afin d'afficher vos emplacements sur le frontend, vous pouvez utiliser:

  • Un menu pour afficher le moteur de recherche d'emplacement, un emplacement unique ou une catégorie d'emplacements
  • Un module pour afficher un champ de recherche ou sélectionner un ensemble d'emplacements
  • Un bouton d'éditeur pour afficher un ou plusieurs emplacements dans n'importe quel éditeur

Charger des emplacements à partir d'un menu

Dans le gestionnaire de menu Joomla, ajoutez un élément et sélectionnez comme type "Recherche et affichage d'emplacement". Il affichera le moteur de recherche de localisation avec des filtres.
Sélectionnez « Vue détaillée de l'emplacement » pour afficher un seul emplacement prédéfini.

 

menu de localisation

 

Si vous sélectionnez "Recherche et affichage de lieu" , vous disposez de certains paramètres d'affichage. Certains peuvent remplacer les paramètres de composant par défaut.

 

configuration du menu principal

 

Depuis l'onglet principal du menu, vous pouvez configurer:

  • Saisir l'adresse: vous pouvez forcer l'affichage d'une adresse par défaut lors du chargement de la page. Il peut être laissé vide
  • Distance: la distance pour verrouiller la recherche, en se référant à l'adresse ci-dessus. Il peut être laissé à -1 (par défaut)
  • Catégorie: charger une catégorie spécifique d'emplacement
  • Limite de recherche: limite le nombre de résultats de recherche. 10 ne renverra que les 10 premiers résultats lors de la recherche d'emplacement
  • Classement: classer les résultats de la recherche par date, titre, distance (par défaut)

 

mml-menu-advanced

 

Ensuite, dans l' onglet du menu My Maps Location , vous pouvez configurer:

  • Sélectionnez le composant : My Maps Location ou toutes les intégrations tierces comme K2, Jomsocial ...
  • ID de catégorie par défaut (extensions tierces): catégorie par défaut à charger lorsqu'une extension tierce est utilisée, comme K2, Hikashop ou Adsmanager, ID de liste CB pour le constructeur de communauté
  • Emplacements des catégories enfants: affichez également les emplacements des résultats de recherche à partir des sous-catégories, pas seulement celle sélectionnée ci-dessus
  • Thème: sélectionnez l'un des 3 thèmes par défaut, pleine largeur et barre latérale du thème de recherche et d'affichage des résultats disponible pour l'élément de menu
  • Fournisseur de carte: sélectionnez Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu ou Mapquest pour styliser vos cartes
  • Activer les balises de recherche : permet d'effectuer des requêtes de recherche à l'aide de noms de balises d'emplacement
  • Modèles: en fonction de la source de la carte, vous disposez de plusieurs types et couleurs de carte
  • Couche de carte: ajoutez des données (couche) à vos cartes. Il existe une couche KML, une couche de trafic, une couche de transport en commun et une couche de vélo.
  • URL de la couche Google Map: utilisez la couche de données pour stocker vos données personnalisées ou pour afficher des données GeoJSON sur une carte Google
  • Type Bing Maps: si Bing Maps est votre fournisseur de cartes, sélectionnez l'apparence et les données de Bing Maps
  • Type d'OpenStreetMap: si OpenStreetMap est votre fournisseur de cartes, vous pouvez ajouter des données (couche) à vos cartes
  • Info-bulle d'emplacement: lors du chargement de la carte, ouvrez automatiquement l'info-bulle d'emplacement après la recherche d'emplacement
  • Zoom de la carte: définissez un niveau de zoom par défaut sur la carte
  • Options de largeur et de hauteur de la carte et des résultats de recherche

 

Affichage frontal basé sur le thème

 

carte-recherche-thèmes

 

Résultat pour un affichage de recherche de lieu unique:

bridgewater-location


Afficher les emplacements à l'aide d'un module

My maps location est livré avec 2 modules pour les emplacements natifs + un autre pour l'intégration tierce (comme un module pour afficher les emplacements des éléments K2)

Le module Carte vous permet d'afficher vos emplacements avec les mêmes filtres que le menu mais dans une position de module. Les emplacements seront affichés sous forme de carte ou de liste. Vous pouvez sélectionner un ensemble d'emplacements ou sélectionner des catégories d'emplacements.

 

module de carte

 

My Maps Location Map - Le module de recherche affichera un moteur de recherche avec certains filtres en option comme la largeur de la carte ou le composant dans lequel l'emplacement sera recherché (recherche de l'emplacement K2 uniquement pour un exemple).

 

module de recherche

 

Module d'affichage en frontend:

 

modules de recherche-carte-front-end

 

 

Afficher les emplacements à l'aide d'un bouton d'éditeur


Le bouton de l'éditeur sera chargé dans votre éditeur Joomla (généralement dans des articles ou des modules personnalisés HTML).
Vous verrez le bouton en bas de votre éditeur. En cliquant, vous verrez une lightbox qui vous permet de sélectionner un ou plusieurs emplacements que vous avez ajoutés auparavant.

 

bouton éditeur de carte

 

Ensuite, vous pouvez sélectionner un ou plusieurs emplacements et appuyer sur le bouton pour l'ajouter à votre article.
Si vous ne spécifiez aucun niveau de zoom, il sera automatiquement chargé pour s'adapter à votre zone de localisation. Le code de balise que vous verrez dans votre éditeur WYSIWYG ressemblera à ce modèle : {mymaplocations mapid width height}

Ex: {mymaplocation id = 1 width = 58% height = 400px zoom = 10 type = google} ce code affichera une carte avec l'ID d'emplacement = 1, avec 58% de largeur, 400px hauteur, 10 fois le zoom et type Google. Utilisation de la virgule pour ajouter plusieurs emplacements sur une carte. Ex: {mymaplocation id = 1 width = 58% height = 400px zoom = 10 type = google} l'ID d'emplacement = 1, 2, 3.