Embed beautiful, interactive maps in your website with just 3 lines of code. No API keys required. Powered by Google Sheets.
The simplest way to add interactive maps to any website. No complex setup, no backend required.
<!-- 1. Add container -->
<div id="map-widget"></div>
<!-- 2. Load script -->
<script src="https://foobarnes.github.io/openmapembed/dist/openmapembed.umd.js"></script>
<!-- 3. Initialize -->
<script>
OpenMapEmbed.init({
container: '#map-widget',
dataSource: {
type: 'google-sheets-public',
sheetId: 'YOUR_SHEET_ID'
}
});
</script>
Interact with a fully functional widget below.
Auto-discovers categories from your data with an 8-color palette. Fully customizable via config.
Connect to any public Google Sheet as your data source. Update data without redeploying.
Leaflet-powered maps with clustering, geolocation, custom markers, and smooth interactions.
Works flawlessly on any device. Height controlled by container for perfect integration.
Search by name, filter by category, and find locations within a specific distance.
Alternate table view with pagination, sorting, and expandable location details.
Only 218 KB gzipped. Built with Vite, React, and Tailwind CSS for optimal performance.
Add beautiful, interactive maps to your website in minutes. Free forever, open source, and incredibly easy to use.