So nutzt du: Google Maps API Generator
- Lege den Standort, Zoom, Kartenstil und die Größe fest.
- Füge Marker hinzu: Gib jedem eine Farbe, eine Position und einen Text für sein Infofenster.
- Aktiviere die Ortssuche oder Google-Bewertungen, wenn du sie brauchst.
- Füge deinen API-Key ein, um die volle Vorschau zu sehen, und kopiere dann den Code oder nutze In Webflow kopieren.
Google-Maps-API-Key erstellen
- Öffne die Google Cloud Console und erstelle ein Projekt mit aktivierter Abrechnung.
- Aktiviere die APIs, die dieses Tool für dein Setup auflistet.
- Erstelle unter Schlüssel & Anmeldedaten einen API-Key.
- Schränke den Key ein auf die Adresse deiner Website und auf diese APIs. Ein Key im Webcode ist öffentlich, deshalb schützen dich nur die Einschränkungen.
Um die Live-Vorschau hier zu nutzen, erlaube devpack.app/* als Website während des Tests oder nutze einen separaten Test-Key.
Was es kostet
Google rechnet nach Nutzung ab und enthält für jede API ein kostenloses monatliches Kontingent. Bewertungen nutzen eine teurere Place-Details-Anfrage, richte daher in der Google Cloud eine Budgetwarnung ein. Aktuelle Preise findest du auf Googles Preisseite.
Über den generierten Code
Die Suchbox und die Bewertungen nutzen die aktuelle Places API (New), da die älteren Places-Dienste für neue Projekte nicht mehr verfügbar sind. Jeder Marker kann ein farbiger Pin, Punkt, Quadrat oder Stern sein oder dein eigenes Bild von einer URL bzw. ein Upload unter 100 KB. Marker verwenden google.maps.Marker, damit sie mit JSON-Kartenstilen funktionieren. Google empfiehlt für neue Projekte Advanced Markers, diese setzen aber eine Map-ID und cloudbasiertes Styling voraus, deshalb generiert dieses Tool sie nicht. Googles Bedingungen verlangen, Bewertungen mit deren Quellenangabe anzuzeigen, und der generierte Code enthält sie.
Brauchst du nur eine einfache Karte ohne Key? Nutze den Google Maps Embed Generator. Verwandt: Color Picker, CSS Button Styles.
Auch gesucht als: google maps marker erstellen, google maps javascript api beispiel, google map individuell gestalten, google maps stile, google bewertungen einbinden, google places api beispiel, google map webflow einbinden.
Passende Tools zu: Google Maps API Generator
- Schema-Markup-Generator — Wähle einen Schematyp aus, fülle das Formular aus und kopiere den JSON-LD-Code, der direkt eingefügt werden kann.
- YouTube-Einbettungscode Generator — Füge einen beliebigen YouTube-Link ein – ein Video, einen Short oder eine Playlist – und erhalte responsiven Einbettungscode mit erweitertem Datenschutzmodus, Start- und Endzeiten, stummem Autoplay, Schleife und Untertiteln.
- JSON Formatierer — Füge JSON ein, um es zu formatieren, zu minifizieren oder zu prüfen.
- Email-Header-Analyzer — Füge die rohen Header einer E-Mail ein, um ihren gesamten Weg zu sehen: jeden Server-Hop mit der benötigten Zeit, die SPF-, DKIM- und DMARC-Ergebnisse, die ursprüngliche IP und Warnzeichen wie ein abweichendes Reply-To oder Return-Path.