How to use the Google Maps API Generator
- Set the location, zoom, map style and size.
- Add markers: give each one a color, a position and text for its info window.
- Turn on place search or Google reviews if you need them.
- Paste your API key to see the full preview, then copy the code or use Copy to Webflow.
Getting a Google Maps API key
- Open the Google Cloud console and create a project with billing turned on.
- Enable the APIs this tool lists for your setup.
- Create an API key under Keys & Credentials.
- Restrict the key to your website’s address and to those APIs. A key in web code is public, so restrictions are what keep it safe.
To use the live preview here, allow devpack.app/* as a website while you test, or use a separate test key.
What it costs
Google bills by usage and includes a free monthly allowance for each API. Reviews use a higher-priced Place Details request, so set a budget alert in Google Cloud. Check Google’s pricing page for current figures.
About the generated code
The search box and reviews use Google’s current Places API (New), because the older Places services aren’t available to new projects. Each marker can be a colored pin, dot, square or star, or your own image from a URL or an upload under 100 KB. Markers use google.maps.Marker so they work with JSON map styles. Google recommends Advanced Markers for new projects, but those require a Map ID and cloud-based styling, so this tool doesn’t generate them. Google’s terms ask you to show reviews with their attribution, and the generated code includes it.
Just need a simple map without a key? Use the Google Maps Embed Generator. Related: Color Picker, CSS Button Styles.
Also searched as: google maps custom marker, google maps javascript api example, custom google map, google maps styles, google reviews embed, google places api example, webflow google map.
Tools that pair well with the Google Maps API Generator
- Schema Markup Generator — Pick a schema type, fill in the form and copy ready-to-paste JSON-LD.
- YouTube Embed Code Generator — Paste any YouTube link — a video, a Short or a playlist — and get responsive embed code with privacy-enhanced mode, start and end times, muted autoplay, loop and captions, or the lite “click to load” version that keeps your page fast.
- Email Header Analyzer — Paste the raw headers of an email to see its whole journey: every server hop with the time it took, the SPF, DKIM and DMARC results, the originating IP, and warning signs like a mismatched Reply-To or Return-Path.
- MIME Type Lookup — Search 200+ file extensions and MIME types — .webp, .woff2, .webmanifest, application/wasm … — or drop a file to detect its real type from its first bytes.