PanMap
A standard embedded Google Map starts downloading Google’s entire map application – scripts, styles, fonts and map tiles – the moment your page loads, whether or not anyone ever looks at it. That work competes with your own content and drags down your Core Web Vitals. PanMap takes that cost off the
A standard embedded Google Map starts downloading Google’s entire map application – scripts, styles, fonts and map tiles – the moment your page loads, whether or not anyone ever looks at it. That work competes with your own content and drags down your Core Web Vitals.
PanMap takes that cost off the initial page load. It shows a clean, lightweight placeholder where the map will be, and only loads the real, interactive Google Map once it scrolls into a visitor’s view.
Built for performance
- Zero requests to Google on page load. The placeholder is drawn with inline SVG and CSS served from your own site. Nothing is fetched from Google until the map scrolls into view.
- Tiny footprint. About 4 KB of CSS and 2 KB of JavaScript, and neither file loads on pages that don’t contain a map.
- No flash of empty space. The placeholder stays in view until the real map has finished loading, then cross-fades smoothly into it.
No API key, no billing
PanMap uses Google’s keyless map embeds, so there is no Google Cloud project, API key or billing account to set up.
Easy to set up
- Find any location. Type a place name or address, enter coordinates, or paste a link copied from Google Maps – including “Share” links.
- Or use the exact map you made in Google Maps. Paste the code from Google Maps’ Share > Embed a map , and PanMap lazy-loads that same map.
- See it before you publish. Preview the placeholder and the real, interactive map exactly as your visitors will see them.
- Copy and paste. PanMap writes the shortcode for you.
Thoughtfully built
- Accessible. There is nothing to click or tab to – the map loads on its own as it scrolls into view, and the cross-fade respects the “reduce motion” system setting.
- Works without JavaScript. Visitors with JavaScript disabled still get a working map.
- Works with page builders. Maps added to the page after it loads, for example by Ajax or a page builder’s live preview, work without extra setup.