How-to guide
How to create an interactive map from an image in WordPress
Use a floor plan, building render or site plan you already own to create a clickable image map in WordPress. You draw the regions yourself, attach unit information, then publish a shortcode. This workflow is for image-based maps; it does not generate geographic map tiles or automatically detect buildings in a photo.
Step by step
Follow these steps
Upload your base image
Install and activate Interactive Real Estate from WordPress.org, then create a project. Upload your JPG, PNG or WebP floor plan, site plan, aerial photo or building render. Choose an image with clear boundaries and use imagery you own or have permission to publish. The plugin does not download Google Maps images.
Draw clickable zones over it
Use the built-in SVG editor to draw hotspots directly on top of your image — one per unit, floor, building, or point of interest. No SVG or coding knowledge needed.
Attach data to each zone
Give each hotspot a name, price, status, or any custom field you need. This is what turns a flat image into a real interactive map, not just clickable outlines.
Drop in the shortcode
Copy the project shortcode from the editor, for example [irep_project id="123"]. Paste it into a Gutenberg Shortcode block or Elementor Shortcode widget, then publish the page. Replace 123 with the actual project ID from your editor.
Test on mobile
Open the published page at desktop, tablet and phone widths. Tap each region and verify its destination or detail modal. Check that the SVG areas remain aligned with the image. Provide a text description and ordinary links alongside the map; if later updates look stale, clear your page or CDN cache and check again.
Related image map guides and features
Live preview
See how an interactive building works on your website
Buyers explore your development the way they actually want to — click any unit for its price, area, floor and availability. They find the flat that fits before they ever pick up the phone, and your sales team spends its time on people who are ready to buy.
Free plan on WordPress.org — no credit card required
Click · Filter · Reserve
One shortcodeFAQ
Frequently asked questions
Do I need to know SVG or coding to create an interactive map?
Can I use this for something other than real estate, like a campus or venue map?
Is there a free way to create an interactive map in WordPress?
What image formats work best for an interactive map?
More guides
All guidesHow to Embed an Interactive Floor Plan on Your Website
How to embed a floor plan on a website so visitors can click each room or unit. Step-by-step for WordPress — one shortcode, responsive, no iframe or coding needed.
HTML Image Map Example: Clickable Areas & Responsive Options
Create an HTML image map with map and area tags. See a working code example, understand responsive coordinates, and compare SVG and WordPress options.
How to Show Apartment Availability on a WordPress Website
Step-by-step guide to displaying live apartment availability on your WordPress site — with colour-coded status, buyer filters, and no custom coding.
Ready to make your images interactive?
Install the free version from WordPress.org and create your first interactive floor plan in minutes — no coding required.