Add provider embeds site‑wide with MicroEdits
Paste any provider’s embed (Google, OSM, ArcGIS) into MicroEdits once and apply across headers, footers, or templates without plugins.
Start with: Embed a Google Map on Your Website.
Google Maps iframe (quickest)
Grab the embed via Share → Embed a map. Make it responsive with an aspect‑ratio wrapper, add loading="lazy", and set a descriptive title.
OpenStreetMap and Leaflet
Use OSM’s share iframe for free embeds. For interactivity with control and no key, use Leaflet with a reliable tile source and proper attribution.
Responsive patterns
Use a wrapper with aspect-ratio. Avoid fixed pixel heights to prevent layout shifts.
Responsive patterns (copy‑ready)
.map-wrap{position:relative;width:100%;height:0;padding-top:56.25%;overflow:hidden}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}Privacy and compliance
Honor consent where needed. Provide attribution for OSM tiles. Keep referrer policy sane.
Which should you choose?
- Iframe: single, static location.
- JS API: multiple markers, events, custom styles.
- OSM/Leaflet: cost control and flexibility.
Frequently Asked Questions
Can I avoid Google branding?
Use OpenStreetMap/Leaflet for more control, but follow attribution rules for the chosen tiles.
Are embeds bad for performance?
They can be if above‑the‑fold. Lazy‑load iframes and defer JS; prefer static screenshots linking to a map when interactivity isn’t needed.