Résumé de l'IA
Souhaitez-vous masquer les points d'intérêt (POI) tels que les restaurants, les magasins et autres commerces sur votre champ Carte afin que seuls vos marqueurs personnalisés soient visibles ? Google Maps affiche ces POI par défaut, mais vous pouvez personnaliser l'apparence de la carte à l'aide de la fonctionnalité de personnalisation des cartes basée sur le cloud de Google Cloud Console.
Ce tutoriel vous montre comment créer un style de carte personnalisé dans Google Cloud Console, le configurer pour masquer les POI et l'appliquer à votre champ de carte WPForms à l'aide d'un extrait de code.
Création d'un style de carte personnalisé dans Google Cloud Console
Pour commencer, ouvrez la console Google Cloud et sélectionnez le projet dans lequel votre clé API Google Places est configurée. Ensuite, cliquez sur Styles de carte dans la barre latérale gauche ou accédez directement à Styles de carte.
Une fois sur cette page, cliquez sur le bouton Créer un style de carte pour commencer à créer un nouveau style de carte.
Ensuite, dans la fenêtre modale qui s'affiche, sélectionnez un mode pour votre carte en choisissant entre Clair ou Foncé. Si vous le souhaitez, vous pouvez également sélectionner un thème optionnel tel que Monochrome pour appliquer un style supplémentaire. Une fois vos sélections effectuées, cliquez sur le bouton Personnaliser pour ouvrir l'éditeur de style.
Une fois l'éditeur de style ouvert, recherchez et cliquez sur la catégorie Points d'intérêt. Celle-ci s'agrandit pour afficher une liste des différents types de points d'intérêt (POI), tels que Urgences, Divertissements, Restauration, Hébergement, Loisirs, Commerce de détail, etc.
Pour masquer les POI, cliquez sur l'icône en forme d'œil située à droite de l'écran pour chaque catégorie que vous souhaitez masquer. Vous pouvez masquer tous les POI à la fois en cliquant sur l'icône en forme d'œil située à côté de la catégorie principale Points d'intérêt, ou vous pouvez masquer de manière sélective certains types de POI en cliquant sur l'icône en forme d'œil située à côté de chaque catégorie individuelle.
Après avoir configuré le style de votre carte, cliquez sur Enregistrer.
Obtenir votre identifiant de carte
Une fois votre style publié, vous devrez créer un identifiant de carte et l'associer à votre style pour pouvoir l'utiliser dans WPForms.
Pour ce faire, accédez à la section Gestion des cartes dans la barre latérale gauche et cliquez sur Créer un identifiant de carte dans votre console Google Cloud.
Dans la boîte de dialogue qui s'affiche, entrez un nom descriptif pour votre ID de carte, sélectionnez JavaScript comme type de carte, puis choisissez Vector parmi les options disponibles.
Une fois terminé, cliquez sur Enregistrer pour créer le nouvel identifiant de carte.
Une fois votre identifiant de carte créé, faites défiler la page Identifiant de carte jusqu'à la section Styles de carte. Cliquez sur l'icône en forme de crayon à côté du style de carte Google par défaut.
Cela ouvre une barre latérale dans laquelle vous devez sélectionner votre style de carte personnalisé. Dans la barre latérale, recherchez votre style publié dans la section Mes styles et sélectionnez-le.
Ensuite, cliquez sur Terminé pour associer votre style personnalisé à l'ID de la carte.
Cela garantit que le style que vous avez configuré sera appliqué chaque fois que cet identifiant de carte sera utilisé.
Enfin, copiez la valeur de l'ID de carte affichée sur la page ID de carte, car vous aurez besoin de cet ID pour intégrer le style personnalisé à WPForms à l'étape suivante.
Appliquer l'ID de carte à votre champ Carte
Pour appliquer votre style de carte personnalisé au champ Carte de WPForms, utilisez l'extrait de code PHP suivant. Personnalisez-le avec votre ID de formulaire, votre ID de champ et l'ID de carte que vous avez copié.
- Sur ligne 11, remplacer
111avec votre identifiant de formulaire actuel - Sur ligne 15, remplacer
222avec votre identifiant de champ de carte réel - Sur ligne 19, remplacer
'your-map-id'avec l'ID de carte que vous avez copié depuis Google Cloud Console (conservez les guillemets autour)
Après avoir enregistré l'extrait de code avec vos valeurs personnalisées, votre champ Carte utilisera le style personnalisé de Google Cloud Console. La carte affichera uniquement vos marqueurs personnalisés, sans aucun point d'intérêt, vous offrant ainsi une vue claire et précise de vos emplacements.
Et voilà ! Vous pouvez désormais masquer les points d'intérêt sur votre champ Carte et n'afficher que vos marqueurs personnalisés. Pour découvrir d'autres façons de personnaliser vos formulaires, consultez notre guide sur la personnalisation de WPForms à l'aide de code.