USA SVG over Google Maps

A geographically calibrated SVG can stay aligned with a Google basemap as visitors zoom and pan.

Prerequisites

Use a working Google Maps API key configured through MapSVG Settings. Enable the services your design needs and test the key restrictions on your actual website.

Use geo-calibrated/usa.svg for this example. An uncalibrated drawing does not acquire correct geographic bounds simply because you turn Google Maps on.

Start from the USA App

1. Create USA Google Overlay from the calibrated USA SVG in ordinary SVG mode.
2. Open Map → Settings → Google Maps and enable Google Maps.
3. Choose the supported map type and initial view for your design.
4. Open Region → Styles.
5. Set region fill to rgba(18, 116, 183, 0.5) and borders to white.

The 0.5 alpha lets Google detail remain visible through the blue states. If Data rules override the fill, use a corresponding 0.5-alpha color in those rules too.

Ordinary calibrated SVG creation and the Google Map with custom overlay creation flow are different. The latter expects the supported downloaded screenshot-template format; do not upload an ordinary USA SVG into that flow and assume its validation requirements are the same.

Verify alignment

Use Arrow mode to zoom and pan the map. Check several recognizable boundaries at more than one zoom level, then repeat on the frontend. Canvas zoom only scales the editor view; it does not test geographic alignment.

Add Object locations using latitude/longitude so markers share the same geographic coordinate system.

Troubleshooting

If tiles fail, inspect the Google error in the browser console and check key/service restrictions. If only the overlay is wrong, check the SVG calibration and initial bounds.

Do not remove Google attribution or capture a failed/blank tile response as if it were a working basemap. The plain SVG example remains useful without external services.