OpenMapEmbed Logo

OpenMapEmbed

OpenMapEmbed Demo

Embed beautiful, interactive maps in your website with just 3 lines of code. No API keys required. Powered by Google Sheets.

Try Live Demo View on GitHub
218KB Gzipped
0 API Keys
3 Lines of Code

Just 3 Lines of Code

The simplest way to add interactive maps to any website. No complex setup, no backend required.

HTML
<!-- 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>
No API Keys Public Google Sheets 5-Minute Setup

Try It Live

Interact with a fully functional widget below.

Everything You Need

Dynamic Categories

Auto-discovers categories from your data with an 8-color palette. Fully customizable via config.

Google Sheets

Connect to any public Google Sheet as your data source. Update data without redeploying.

Interactive Maps

Leaflet-powered maps with clustering, geolocation, custom markers, and smooth interactions.

Fully Responsive

Works flawlessly on any device. Height controlled by container for perfect integration.

Smart Filtering

Search by name, filter by category, and find locations within a specific distance.

Table View

Alternate table view with pagination, sorting, and expandable location details.

Lightweight

Only 218 KB gzipped. Built with Vite, React, and Tailwind CSS for optimal performance.

218KB Gzipped
No API Keys
Google Sheets
Mobile First
Auto Categories
Smart Filtering
Open Source
Free Forever

Ready to Get Started?

Add beautiful, interactive maps to your website in minutes. Free forever, open source, and incredibly easy to use.

Free Forever No Backend 5 Minute Setup