Elfsight Google Maps widget

The native Map element in Webflow displays a single pinned address, and it needs a Google Maps API key to render without a development-only watermark across it. A business with a dozen branches needs a separate native map for every address. Custom marker icons, location search, and route directions sit outside what that element does. The Elfsight Google Maps widget provides those features through its generated installation snippet.

Pasting the widget's installation snippet into a Code Embed element puts an interactive map with unlimited markers on any Webflow page. Each marker opens an info card with an image, address, phone, email, working hours, and a one-click route that opens in Google Maps. Teams that store location records in the Webflow CMS can export them to the widget's CSV format when the list changes.

Multi-location retailers, restaurant groups, clinics, hotels, and real estate teams get the most out of this pairing. Freelancers and agencies use it to hand clients a map they can update without design access in Webflow. In-house marketing teams change store hours or add an office without filing a developer ticket.

How to integrate Elfsight Google Maps widget with Webflow

What is the Elfsight Google Maps widget? The Elfsight Google Maps widget is a no-code embeddable map that displays multiple locations with contact details and navigation support. You configure markers, map type, color scheme, and info cards in the Elfsight dashboard, then install a generated JavaScript snippet on any platform that accepts custom HTML. The map itself is Google's: the widget loads Google's Maps JavaScript API in the visitor's browser using the API key you supply, and it layers its own locations panel, filters, and info cards on top.

The integration supports two approaches. Code Embed elements and site custom code place the widget snippet on one page or across the whole site with nothing beyond copy and paste. The Webflow Data API and the Webflow MCP server give you programmatic control over script registration, page placement, and CMS location data, at the cost of server-side work. Most implementations use the Code Embed method alone; the API path applies when you manage many sites or keep location records in the Webflow CMS.

Add the Elfsight Google Maps widget with Code Embed elements and site custom code

Webflow's Code Embed documentation lists the publishing prerequisite. Elfsight documents this Webflow method in the guide linked from this page, and it covers nearly every real deployment. Install the widget by pasting its snippet. Webflow Marketplace does not list an Elfsight app, and the process has no OAuth authorization step or in-panel installer.

Create and publish the map in the Elfsight dashboard

The installation code lives in the Embed Widget popup after you publish a widget. Elfsight's first-widget guide walks through template selection, and its dashboard guide covers the Embed Widget popup where the code lives.

To create the widget and copy its code:

1. Log in to Elfsight, open the Catalog tab, and select Google Maps.
2. Choose a template and click Continue with this template.
3. Add locations under Content, pick a map type and color scheme, and connect your Google Maps API key following Elfsight's three-step key guide.
4. Click Publish. Elfsight applies no changes to the live widget until you publish.
5. Click Install, then choose Embed Code in the Embed Widget popup and copy the snippet.

The same popup offers a Platform Tutorials option where you can select Webflow for Elfsight's own walkthrough.

Place the widget on one page with a Code Embed element

For a contact or locations page, page-specific placement loads the widget only where visitors need it and keeps Elfsight view counts down. A Code Embed element renders the map exactly where you drop it in the layout.

To add the map to a page:

1. In the Webflow dashboard, hover over the site and click Open in Webflow.
2. Click the ➕ icon, find Code Embed, and drag it to the spot where the map should sit.
3. Paste the installation code into the Code Embed Editor and click Save & Close.
4. Set the element's width and height in the right sidebar, then click Publish and choose Publish to Selected Domains.

Once the snippet is in place, you can:

• Add or edit locations by address or place name; Google geocoding sets the coordinates.
• Assign one of the library icons or an uploaded icon to each marker under Content → Icons.
• Bulk-import up to 1,000 locations from a CSV file under Content → Locations as described in the CSV import guide.
• Toggle the Locations Panel, search field, category filters, and the Transit, Bike, or Traffic layers.
• Adjust the four color schemes, 23 paintable map elements, or add custom CSS in the Appearance tab.

A placeholder appears on the Webflow canvas; the map renders in Preview mode with custom code enabled and on the published site. Previews run on a {shortName}.canvas.webflow.com subdomain, so a Google Maps API key restricted to your production domain may fail in preview, as Webflow's custom code previews article explains. Site managers turn this on with the "Run custom code in Preview" toggle in Site settings, Custom code. Publishing to the webflow.io staging subdomain first gives you a working test before the live domain goes out. Each Code Embed element accepts up to 50,000 characters, which the short Elfsight snippet never approaches.

What the snippet loads for your visitors

The snippet is a loader, so most of what runs on your page arrives after the fact, and two of those requests go to Google. We read both shipped files to check.

• An Elfsight boot call carrying your page URL: platform.js requests core.service.elfsight.com/p/boot/ with the widget id and the full URL of the page, and it sets withCredentials, so the request is cross-origin with cookies attached on every load.
• Google's Maps JavaScript API, keyed to you: the widget appends a maps.googleapis.com/maps/api/js script tag built from the API key stored in your widget settings, which is your own Google Cloud key, not an Elfsight one. Restrict it: Elfsight notes that API keys are publicly accessible, so anyone can read yours out of the page.
• Google Fonts, which Elfsight cannot switch off: its GDPR article names the Google Maps app as the exception to its own font-avoidance advice, saying Google Fonts load when the widget fetches location data from Google. Web fonts also come from Elfsight's own CDN.
• Nothing that looks like visitor tracking: across both files there is no Sentry, session replay, Hotjar, Clarity, FullStory, LogRocket, PostHog, Mixpanel, Google Analytics, Meta pixel, sendBeacon or document.cookie write. Elfsight's own view counter is the one event path, and it carries the app name, widget id, and event name, not visitor attributes.
• Two browser stores, both narrow: the widget caches geocoded coordinates in IndexedDB for an hour to cut repeat lookups, and it writes to localStorage only when a debug flag is set by hand. There is no persistent visitor id.

One behavior is worth knowing before you enable it: clicking Directions on a marker asks the browser for the visitor's current position and then calls Google's Directions service. That is user-initiated and the browser prompts for permission first, so it is not silent, but it is a location request your privacy notice should cover. Everything except the Directions click fires on page load, before a consent banner can resolve, which is why the placement advice below matters.

Load the widget site-wide from site settings custom code

Every page load counts as one view when the snippet sits in site settings, so this placement uses a plan's monthly allowance faster than a single-page embed, per Elfsight's views article. The allowance runs 200 views a month on the free plan, then 5,000, 50,000, and 150,000 on the paid tiers, and Elfsight's view limit guide says it applies to the whole app rather than per widget or per website. Pass it and the widget is deactivated: it stops appearing to visitors until the next reset date or an upgrade, so a live Webflow page quietly loses its map. Elfsight notes that this placement "works best for floating widgets", so use it for an overlay-style map. Inline maps belong in Code Embed elements; for a static map on every page, Elfsight asks you to contact its Support team. The Custom code in head and body tags documentation covers the fields involved.

Because that deactivation is silent on the Webflow side, check the Views tab in Elfsight before a traffic spike rather than after one.

To add the snippet across the site:

1. In the Webflow dashboard, click ⋯ next to the site and choose Settings.
2. Open Custom Code in the left sidebar, paste the code into the Head Code field, and click Save.
3. Click Publish and choose Publish to Selected Domains.

Elfsight's Webflow custom code tutorial recommends the Footer code section for JavaScript so the script loads after page content. Page settings also expose Inside <head> tag and Before </body> tag fields if you want the snippet on one page without using an element.

All Elfsight snippets ship with lazy loading through the data-elfsight-app-lazy attribute, and widgets installed after October 7, 2024 load with async. If you installed before that date, Elfsight's loading speed guide tells you to replace defer with async and remove data-use-service-core in the pasted code.

Build with the Webflow Data API and MCP server

Everything programmable here sits on the Webflow side. The Data API registers the Elfsight script and applies it to sites or pages, and the CMS endpoints let you treat a Locations collection as the source of truth that feeds Elfsight's CSV import. The Google Maps widget has no public Elfsight REST API: every setting, location, and API key lives in the Elfsight dashboard. Elfsight does publish an Embed SDK, but its own documentation aims it at theme and website-builder vendors who want to resell the widget catalogue inside their product, not at a site owner placing one map, so it is the wrong tool for this job.

This path suits agencies deploying the same map across many client sites, or teams whose location data already lives in Webflow. Three Webflow interfaces do the work:

• Registered scripts and custom code: the register hosted script endpoint stores the loader against a site, and separate site and page endpoints apply it.
• CMS collections: the collections endpoints read the Locations records you will export to Elfsight.
• Webhooks: Webflow webhooks fire when collection items change or the site publishes, which is what triggers a fresh export.
• The MCP server: its custom-code tools cover the same ground from an agent, including register_hosted_script, add_site_script, and set_site_freeform_code, and it is available on every Site plan including the free Starter.

Data API v1 was deprecated on March 31, 2025, so all requests below target https://api.webflow.com/v2.

Register the Elfsight script with the Data API

Registering a hosted script requires the custom_code:write scope, and the request body takes hostedLocation, integrityHash, version, and displayName. Point hostedLocation at https://elfsightcdn.com/platform.js and you can roll the widget loader out to a site without opening it in Webflow.

The integrity hash is the catch, and it is worth understanding before you build on this. Elfsight serves platform.js from one unversioned URL, so the file changes underneath you when Elfsight ships a release, and a subresource integrity hash pinned to yesterday's bytes will make the browser refuse to run it. If you register the loader this way, treat a new Elfsight release as a change you have to re-register. Writing the snippet into a freeform custom-code block instead avoids the hash entirely, which is the more durable option for most teams.

To deploy the loader from a script:

1. POST /v2/sites/{site_id}/registered_scripts/hosted with the Elfsight CDN URL to register the loader for that site.
2. PUT /v2/sites/{site_id}/custom_code to apply it site-wide, or PUT /v2/pages/{page_id}/custom_code to apply it to a single page, per the page custom code reference.
3. Place the widget container <div class="elfsight-app-{widget-id}" data-elfsight-app-lazy></div> in a Code Embed element where the map should render.
4. POST /v2/sites/{site_id}/publish to push the change live.

GET /v2/sites/{site_id}/custom_code returns the scripts currently applied, and DELETE on the same path removes everything your app registered when a client moves off the widget.

Insert the embed with the Designer API

Extension builders can skip the manual drag step entirely. The Designer API's HtmlEmbed preset produces an HtmlEmbedElement that holds the Elfsight <script> and <div> snippet, as the element presets reference describes.

To insert the widget from an extension:

1. Retrieve the target element on the canvas using the methods in the creating and retrieving elements reference.
2. Insert an HtmlEmbed preset with append(), before(), or after() relative to that element.
3. Set the embed's content to the installation snippet copied from the Elfsight dashboard.

This only applies if you are building a Webflow App extension. For a one-off map, dragging a Code Embed element in is faster than writing an extension to do it.

Keep location data in the Webflow CMS and export it for Elfsight

Elfsight provides CSV import as the transfer path for CMS records. Its automation connectors and endpoints do not write locations into the widget. Build a Locations collection whose fields mirror the import columns (Location, Name, Description, Image URL, Address, Website, Phone, Email, Working Hours), and a Collection List can render the same records as crawlable text beneath the map. Elfsight caps each import at 1,000 locations, so that is usually the binding limit rather than anything on the Webflow side.

To generate the import file from the CMS:

1. POST /v2/sites/{site_id}/webhooks with a triggerType of collection_item_changed, collection_item_created, or collection_item_published to notify your endpoint when a location changes; the payload includes siteId, collectionId, and a fieldData object.
2. On each event, GET /v2/collections/{collection_id}/items/live with the cms:read scope to pull the current published locations, per the live items reference.
3. Write the rows to a CSV in Elfsight's column order and store it where an editor can download it.
4. In the Elfsight editor, open Content → Locations and click Import Locations from CSV to upload the file.

The final upload stays manual, and it replaces the full location list on every run, so the CSV must always contain the complete set. Coordinates in the Location column, rather than addresses, cut Google geocoding requests on each import, a workaround Elfsight documents in its common errors article.

Storing those coordinates is where Google's own rules come in, and they are worth reading before you build a pipeline around them. The Maps Platform Terms of Service say plainly: "Customer will not cache Google Maps Content except as expressly permitted under the Maps Service Specific Terms." Those service specific terms then permit temporary caching of latitude and longitude values from the Geocoding API "for up to 30 consecutive calendar days, after which Customer must delete the cached latitude and longitude values", with a narrower indefinite allowance attached to conditions about per-user isolation. Elfsight's own widget stays well inside that: it keeps geocoded coordinates in the browser for an hour. A CMS column holding Google-derived coordinates indefinitely is a different question, and coordinates you obtained some other way are not Google Maps Content at all. Read the clauses and decide with your own counsel; we are not going to tell you whether your build complies.

What you can build with the Elfsight Google Maps widget Webflow integration

The widget earns its place wherever one address is not enough and the list changes often enough that hand-editing a native Map element stops being sensible. These four patterns cover most of what teams actually ship.

• Store locator page with search and filters: A "Find a store" page carries a full-width Code Embed map with the Locations Panel open by default, a search field for name or address, and category filters such as showroom or outlet. A retail chain with dozens of branches imports them all from one CSV and styles the markers with its own uploaded icons.
• Contact page inline map with hours and directions: A single-location business drops the widget into its contact page so the info card shows address, phone, email, working hours, and a route button, which saves the visitor a hop into a separate maps tab.
• Location pages fed by the CMS: Elfsight's Webflow plugins page says its widgets work inside Webflow CMS templates across all Collection pages. A clinic network places the map in its Collection page template and pairs it with a Collection List of practice details, then keeps both in sync through the CSV export path.
• Brand-matched map for a hospitality site: A hotel group applies the Night color scheme, repaints elements to match its palette, adds the Terrain map type for resort locations, and switches the widget interface to the language of its primary market.

If the map is one piece of a larger custom-code setup, see how to apply custom code programmatically across your sites, then connect the Webflow MCP server so an agent can register the loader, place it, and publish without you writing the calls by hand.