Comment utiliser : Générateur d’API Google Maps
- Définissez la localisation, le zoom, le style et la taille de la carte.
- Ajoutez des marqueurs : attribuez à chacun une couleur, une position et un texte pour sa fenêtre d’information.
- Activez la recherche de lieux ou les avis Google si vous en avez besoin.
- Saisissez votre clé API pour voir l’aperçu complet, puis copiez le code ou utilisez Copier pour Webflow.
Obtenir une clé API Google Maps
- Ouvrez la console Google Cloud et créez un projet avec la facturation activée.
- Activez les API que cet outil indique pour votre configuration.
- Créez une clé API dans Identifiants.
- Restreignez la clé à l’adresse de votre site et à ces API. Une clé utilisée dans du code web est publique : ce sont les restrictions qui la protègent.
Pour utiliser l’aperçu en direct, autorisez devpack.app/* comme site web pendant vos tests, ou utilisez une clé de test distincte.
Tarifs
Google facture à l’usage et inclut un quota mensuel gratuit pour chaque API. Les avis utilisent une requête Place Details plus coûteuse : configurez donc une alerte de budget dans Google Cloud. Consultez la page tarifaire de Google pour les montants actuels.
À propos du code généré
La zone de recherche et les avis utilisent la version actuelle de l’API Places (New), car les anciens services Places ne sont plus disponibles pour les nouveaux projets. Chaque marqueur peut être une épingle, un point, un carré ou une étoile colorés, ou une image personnalisée depuis une URL ou un fichier téléversé de moins de 100 Ko. Les marqueurs utilisent google.maps.Marker, ce qui les rend compatibles avec les styles de carte en JSON. Google recommande les Advanced Markers pour les nouveaux projets, mais ceux-ci exigent un Map ID et un style géré dans le cloud : cet outil ne les génère donc pas. Les conditions de Google vous imposent d’afficher les avis avec leur attribution, et le code généré l’inclut.
Besoin simplement d’une carte sans clé ? Utilisez le Générateur d’intégration Google Maps. À voir aussi : Sélecteur de couleur, Styles de boutons CSS.
Aussi recherché comme : générateur api google maps, marqueur personnalisé google maps, exemple api javascript google maps, carte google maps personnalisée, styles google maps, intégrer avis google, exemple api google places, carte google maps webflow.
Outils complémentaires : Générateur d’API Google Maps
- Générateur de balisage Schema — Choisissez un type de schéma, remplissez le formulaire et copiez le code JSON-LD prêt à être collé.
- Générateur de code d'intégration YouTube — Collez n'importe quel lien YouTube — une vidéo, un Short ou une playlist — et obtenez un code d'intégration responsive avec mode confidentialité renforcé, heures de début et de fin, lecture automatique en sourdine, boucle et sous-titres, ou la version Lite « cliquer pour charger » qui garde votre page rapide.
- Formateur JSON — Collez votre code JSON pour le formater, le compresser ou le valider.
- Analyseur d’en-têtes e-mail — Collez les en-têtes bruts d’un e-mail pour voir tout son parcours : chaque saut entre serveurs avec le temps qu’il a pris, les résultats SPF, DKIM et DMARC, l’IP d’origine et les signaux d’alerte, comme une adresse Reply-To ou Return-Path incohérente.