How do I make an interactive map for my website?

If your map is an image — a floor plan, campus, venue, resort, or stylised region — upload it, click each location to place a marker, write a card for each one, and paste the resulting embed snippet into your page. If you need real-world coordinates, driving directions, or thousands of data points, use a geographic mapping platform instead.

Can I make an interactive map for free?

Yes. The free plan publishes one interactive map with unlimited markers and shows a small Interactive Image badge on the embed. Removing the badge and publishing more maps is $5/month.

Do I need Google Maps or an API key?

Not for an image-based map. Google Maps and similar platforms exist to render the real world and need an API key and usually billing. A custom illustration, floor plan, or venue layout isn't in their data anyway — an image with markers is both simpler and more on-brand.

What's the difference between a geographic map and an image map?

A geographic map draws from a live dataset and understands latitude and longitude, so it supports search, routing, and zoom to street level. An image map places markers as percentages of a picture you supply, so it can show anything — a stand layout, a ski resort, a fictional world, a building floor.

How do I make a clickable map of the United States or Europe?

Use an SVG or PNG of the region as your base image and drop one marker per state, country, or office. That's the fast route when each area needs a card or a link. If you need choropleth shading driven by a spreadsheet, a dedicated data-visualisation tool fits better.

Will the map work on phones?

Yes. Markers are stored as percentages of the image, so they stay locked to their location at every width, and tapping a marker opens its card as a full-width panel instead of a hover tooltip.

Can each location link to its own page?

Yes. Every marker card has its own CTA link, so a campus map can send visitors to a department page and a venue map to a booking page.

How many markers can one map have?

There's no cap, but readability is. Beyond roughly 25 markers on one image, group them with categories or split the map into zones — visitors scan a picture, they don't enumerate it.

Which website builders does the embed work in?

Any builder with an embed or HTML block: Wix, Squarespace, WordPress, Webflow, Shopify, Framer, HubSpot, Ghost, Google Sites, Notion, and hand-written HTML.

Can I update the map after publishing it?

Yes. Edit and save in the editor and every page that embeds the map shows the new version — you don't re-paste the snippet unless the image's aspect ratio changed.

How-to

How to make an interactive map for a website.

For plans, campuses, venues, resorts, and stylised regions, an image-based map beats a geographic one: it's on-brand, needs no API key, and takes about ten minutes.

Start free See the live editor

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

An interactive map of a building with numbered markers, one card open showing a room name and capacity — One marker per location, each with its own card and link.

Try it now with your own map image

Upload a floor plan, campus map, or venue layout, click to drop markers, and hover to see the cards. Publish it and get your website embed with a free account.

InteractiveImage.com

Hover a hotspot to preview · drag to move4 hotspots · runs in your browser

Publish this image — start free See plans — Pro $5/mo

This is a live demo — nothing here is published yet. Create a free account to publish your image and get a one-line embed code for Wix, Webflow, WordPress, Squarespace or plain HTML, with hosted images, images and video in the cards, CTA buttons and edits that go live instantly. Free includes 1 published image with the Interactive Image badge; Pro removes the badge and unlocks white-label embeds.

No API key, no billing

Your own map image, not a licensed geographic dataset — nothing to provision.

Markers as percentages

Every location stays on target from desktop down to a 390px phone.

One embed, any builder

Paste a single snippet into Wix, WordPress, Webflow, Squarespace, Shopify, or plain HTML.

What you get

Works from a floor plan, campus map, venue layout, or illustrated region
Each marker gets a title, description, photo, and link
Categories to group markers on busy maps
Tap-friendly cards on mobile, hover on desktop
Free plan publishes one map with unlimited markers

First decide which kind of map you need

"Interactive map" covers two genuinely different things, and picking the wrong one costs days. Be honest about which job you have:

You need	Use	Why
Search, driving directions, street-level zoom, live geodata	A geographic platform (Google Maps, Mapbox)	Real coordinates and a maintained basemap; needs an API key and usually billing
Thousands of rows shaded by value, from a spreadsheet	A data-visualisation tool	Built for choropleths and data joins
A plan, campus, venue, resort, stand layout, or branded region illustration	An image-based interactive map	None of it exists in a geographic dataset; you want your artwork, with markers on it

Most searches for "interactive map for my website" turn out to be the third row: a picture of a place, with clickable points. That's what the rest of this page covers.

Step 1 — prepare the map image

Export at ~2× display width. A map shown at 1000px wants a roughly 2000px file so labels stay legible on retina screens.
PNG for line art, JPG for renders. Plans and illustrations are mostly flat colour and type — PNG keeps the edges clean.
Trim dead space. Crop the borders before uploading, not after — markers are positioned relative to the file you upload.
Simplify the artwork. If the base image already labels everything, the markers compete with it. Strip the labels and let the cards carry the text.
Avoid extreme aspect ratios. A 4:1 panorama letterboxes hard on phones. Nearer 3:2 or 4:3 travels better.

Coming from CAD or a PDF? The floor plan image prep guide covers export settings from AutoCAD, Revit, SketchUp, and PDF specifically.

Step 2 — place the markers

Upload the image, then click each location to drop a marker and drag to fine-tune. A few things that make the difference between a map people use and one they abandon:

Number them if there's an order. A tour, a process, or a route reads far better numbered than as identical dots.
Keep markers ~32px apart. Closer than that and a thumb can't reliably hit the one it's aiming at.
Contrast against the artwork. Dark markers on a pale plan, light markers on a dark render. Busy photography may need a subtle halo.
Use categories on dense maps. Entrances, amenities, and departments as separate groups lets visitors filter mentally.

Step 3 — write cards people actually read

A marker card is not a paragraph. The shape that works: a short specific title, one or two lines of the fact the visitor came for, an optional photo, and exactly one link.

Title = the name they'd say out loud. "Suite 204", "North Entrance", "Conference Room A".
Body = the deciding detail. Capacity, price, availability, opening hours — not marketing copy.
One CTA. "See the unit", "Book this room", "View the department". Two buttons halve the click-through on both.
A photo where it settles the question. A room, a stand, a view. Skip it if it's decorative — it just makes the card taller on phones.

Step 4 — embed it and check the phone

Publishing produces one responsive iframe snippet. Paste it into your builder's embed or HTML block — there are exact click paths for Wix, WordPress, Webflow, Squarespace, Shopify, and Google Sites.

Then open the live page on an actual phone. Check three things: no scrollbar inside the embed, every marker still over its location, and the cards readable without pinch-zoom. If markers look shifted, the container is forcing a height that differs from the image's ratio — see why hotspots drift on mobile.

Maps teams build most often

Office and building plans (interactive office floor plan), property listings (interactive floor plan), hotels and resorts (interactive hotel map), events and venues (interactive seating chart), campuses (education), and museums (exhibit maps). The general-purpose starting point is the interactive map maker.

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image