Personnaliser les marqueurs et les icônes dans Google Maps

Au fil des ans, Google a constamment affiné ses outils pour fournir des services de géolocalisation exceptionnels. Les marqueurs, ces épingles colorées disséminées un peu partout, font partie des éléments essentiels à l’interaction.

Dans cet article, nos experts de Google Maps Platform mettent l’accent sur le déploiement des marqueurs avancés, en s’appuyant sur les observations d’Alicia Sullivan, chef de produit chez GMP. Cette fonctionnalité très attendue répond à l’une des principales demandes de la communauté des développeurs. Voyons comment le géant mondial de la technologie a répondu à ces besoins et comment vous pouvez désormais créer une expérience utilisateur plus rapide, hautement personnalisable et percutante.

Comment modifier l’icône de l’épingle Google Map et créer davantage de marqueurs visuels ?

Vous connaissez sans doute les épingles rouges classiques qui s’affichent aux endroits choisis. Vous avez peut-être déjà cherché à modifier la couleur des épingles sur Google Maps. Grâce aux nouvelles fonctionnalités avancées, il est désormais possible de modifier presque tous les détails visuels – fond, contour, icône (glyphe), taille et, bien sûr, couleur. Vous pouvez même recréer l’épingle rouge par défaut uniquement à l’aide de code, sans fichier image.

Imaginez un peu : vous êtes une entreprise de vente au détail qui possède plusieurs magasins dans une même ville. Grâce à des couleurs spécifiques à votre marque, vos repères cartographiques sont instantanément reconnaissables par les clients.

Si vous gérez une entreprise de logistique, vous pouvez refléter l’état des livraisons grâce à des changements de couleur mis à jour en temps réel. De même, les agences de voyage peuvent attribuer des icônes et des teintes différentes aux divers équipements des hôtels, afin d’aider les utilisateurs à choisir leur séjour idéal de manière plus efficace.

Créer des marqueurs Google Maps dynamiques avec HTML et CSS

Pour concevoir des marqueurs interactifs et animés, vous pouvez désormais utiliser les feuilles de style CSS pour contrôler des éléments tels que la taille, la transparence, la position et la couleur. Les marqueurs avancés sont rendus en tant qu’éléments HTML dans le DOM, ce qui les rend aussi flexibles que n’importe quel autre élément de la page.Avec du HTML et du CSS personnalisés, vous pouvez créer des marqueurs uniques à partir de zéro. Aucune superposition supplémentaire ou image externe n’est nécessaire. Par exemple, les plateformes immobilières peuvent afficher les prix, la superficie et d’autres données directement dans les icônes.

Google Maps : Modifier l’icône du marqueur à l’aide de vos propres graphiques

Pouvez-vous utiliser votre propre image comme icône ? Absolument. L’API mise à jour prend désormais en charge les types de fichiers SVG et PNG, ce qui vous permet d’intégrer directement des icônes ou des photos personnalisées à vos marqueurs.

Que vous souhaitiez modifier les icônes du marqueur GM ou marquer entièrement l’interface de votre carte, les fonctionnalités avancées vous permettent d’intégrer des visuels personnalisés en toute simplicité.

Comment modifier la couleur des lieux enregistrés sur Google Maps ?

Vous craignez que ces personnalisations ne ralentissent votre carte ? Ce n’est pas nécessaire. Les marqueurs avancés s’affichent jusqu’à 66 % plus rapidement que les marqueurs standard et sont plus fluides lors des panoramiques et des zooms. L‘accessibilité a également été privilégiée : les utilisateurs peuvent désormais interagir avec les marqueurs à l’aide d’une navigation au clavier uniquement. Si un marqueur est cliquable ou déplaçable, il réagit à la fois au clavier et à la souris. Ainsi, même lorsque vous vous concentrez sur la manière de modifier la couleur des lieux enregistrés sur GMP, vous ne sacrifiez ni les performances ni la convivialité.

Fonctionnalités du marqueur de changement d’icône de Google Maps sur les appareils mobiles

Publiée en mai 2023, l’API Marqueurs avancés prend en charge à la fois iOS et Android.Les développeurspeuvent utiliser des éléments de rendu natifs – UIViews pour iOS et Views pour Android – pour des performances fluides sur toutes les plateformes.

À l’aide de Jetpack Compose et de la bibliothèque utilitaire Maps SDK, les développeurs Android peuvent appliquer la mise en grappe et même tirer parti de la compatibilité Compose. Côté JavaScript, la bibliothèque d’utilitaires Advanced Markers combine les fonctionnalités des différentes classes, ce qui facilite l’attribution de propriétés dynamiques, la définition de polices d’icônes ou le choix d’une couleur de marqueur Google Maps générée automatiquement.\En bref : que vous soyez sur mobile ou sur ordinateur, il ne devrait plus être difficile de comprendre comment modifier l’icône d’une épingle et d’autres éléments de style, car tout est désormais cohérent.

Devriez-vous continuer à utiliser l’ancienne classe de marqueurs ?

Bien que la classe originale google.maps.Marker soit toujours disponible, elle est officiellement obsolète depuis la sortie de la version 3.56 de l’API JavaScript Maps. La nouvelle norme est google.maps.marker.AdvancedMarkerElement.

Le passage à la nouvelle classe vous donne accès à un rendu plus rapide, à une personnalisation plus facile, à une accessibilité améliorée et à des fonctions de style plus étendues. Bien qu’il soit prévu de prendre en charge l’ancienne version avec des corrections de bogues pour le moment, les nouvelles mises à jour ne s’appliqueront qu’au modèle avancé.Donc, si vous utilisez toujours l’ancienne API et que vous vous demandez comment changer un marqueur d’icône Google Map, la transition vers le mode avancé est la meilleure solution.

Besoin d’aide avec Google Maps et d’autres produits Google ?

En tant que partenaire Google Cloud Premier, Cloudfresh est un centre d’expertise unique. Pour plus d’informations sur les produits et les capacités de GMP, vous pouvez contacter nos professionnels qui ont obtenu la certification Technical Fundamentals.

Que proposons-nous ?

1. Consultations sur la sélection de l’API optimale et son intégration ;
2. Des services de développement basés sur les BPF pour permettre une mise en œuvre efficace de l’API tout en minimisant l’utilisation des quotas et en maximisant les performances ;
3. Formation technique de vos équipes sur l’ensemble des services que les API de GM peuvent offrir ;
4. Support technique : résolution des incidents sur le GMP, demandes d’utilisation correcte des services, etc.
5. Une réponse garantie dans le cadre du SLA.

En collaborant avec Cloudfresh, vous bénéficiez en outre des avantages suivants :

• L’accès à un système de réduction à sept niveaux qui n’est possible qu’en collaboration avec un partenaire officiel ;
• Paiement par facture à une entité légale en EUR, USD, CKZ, PLN, UAH, ou toute autre devise (crypto inclus) ;
• Collaboration dans votre langue maternelle, grâce au multilinguisme de notre équipe.

En tant que partenaire de Google Maps, nous fournissons un support professionnel tout au long du processus d’utilisation des services.Contactez notre équipe et saisissez l’opportunité d’améliorer votre infrastructure informatique et d’amener l’expérience utilisateur de vos clients à un niveau supérieur grâce aux services de Google Maps.

Conseils rapides

Nos experts reçoivent de nombreuses questions concernant la personnalisation de l’OGM. Pour vous aider à tirer le meilleur parti de vos efforts de cartographie, nous avons apporté des réponses détaillées à ces questions fréquemment posées.

Comment modifier un marqueur sur Google Maps ?

Utilisez l’API des marqueurs avancés pour modifier l’arrière-plan, le glyphe ou utiliser votre image personnalisée. Vous pouvez également le contrôler de manière dynamique via JavaScript ou CSS.

Comment modifier la couleur d’un repère sur Google Maps ?

Personnalisez la couleur du marqueur en utilisant l’ attribut style dans votre configuration. Cette fonction est particulièrement utile pour les distinctions visuelles basées sur la catégorie ou le statut.

Comment modifier l’icône d’un marqueur sur Google Maps ?

Téléchargez un fichier SVG ou PNG et référencez-le dans votre objet marqueur à l’aide de la propriété icon.

Comment modifier l’icône d’un marqueur dans Google Maps ?

Les icônes peuvent désormais être entièrement remplacées par vos propres dessins, même de manière dynamique, en fonction des actions de l’utilisateur ou des mises à jour des données.

Comment modifier la couleur des lieux enregistrés dans Google Maps ?

Bien que l’application GM standard ne permette pas de modifier directement la couleur des lieux enregistrés, vous pouvez les regrouper et les organiser visuellement à l’aide de Mes cartes, en leur appliquant des couleurs ou des étiquettes différentes.

Peut-on utiliser la classe d’héritage ?

Oui, mais elle est obsolète. Vous devriez passer à l’élément AdvancedMarkerElement pour bénéficier de toutes les dernières améliorations en matière de performances et de personnalisation. Cela va de la simple modification d’un marqueur sur Google Maps aux mises à jour avancées en temps réel.