🗺️ Image Map Generator — Generador de image maps HTML, gratis online

Free HTML Image Map Generator. Create interactive clickable areas on images using HTML image maps. Draw rectangles, circles and polygons on a canvas. Set href, alt and title per area. Export clean HTML or JSON. No sign-up, no ads, 100% client-side.

🌐 Demo en vivo / Live demo: miguelacm.es/tools/image-map-generator

---

✨ Features

• 3 formas / 3 shapes: Rectangle, circle and polygon (unlimited vertices)
• Canvas editor: Draw areas directly on the image with pixel precision
• Edición de áreas / Area editing: Set href, alt and title for each area
• Undo / Redo: Full history navigation for all area changes
• Zoom: Scale the image from 50% to 200% for precision work
• Rejilla snap / Snap grid: Optional 10px grid snap for perfect alignment
• Exporta HTML / Export HTML: Ready-to-paste <map> + <area> code
• Exporta JSON / Export JSON: Structured JSON for JavaScript use
• Descarga / Download: Save the output as .html or .json file
• Sin servidor / Zero server: Your image never leaves your device
• Embebible / Embeddable: Use it as an iframe on any website
• Open source: MIT license, use it freely

---

🚀 Quick start

git clone https://github.com/m-a-c-m/ImageMapGenerator.git
cd ImageMapGenerator
npm install
npm run dev

Open http://localhost:3000.

Environment variables (optional)

NEXT_PUBLIC_SITE_URL=https://miguelacm.es/tools/image-map-generator
NEXT_PUBLIC_EMBED_URL=https://miguelacm.es/embed/image-map-generator

---

📦 Embed on your website

Iframe (plug & play)

<iframe
  src="https://miguelacm.es/embed/image-map-generator"
  width="100%"
  height="750"
  style="border:none;border-radius:12px;"
  title="Image Map Generator — miguelacm.es"
  loading="lazy"
></iframe>

Link with attribution (recommended for backlink)

<a href="https://miguelacm.es/tools/image-map-generator" target="_blank" rel="noopener">
  Generador de image map HTML gratis por MACM
</a>

💡 The link option generates a real backlink that benefits the project. Recommended if your platform supports custom HTML.

---

🛠 Tech Stack

Technology	Version	Purpose
Next.js	16	React framework + SSG
TypeScript	5	Type safety
Tailwind CSS	4	Styling
react-icons	5	Icons

---

📄 License

MIT © Miguel Ángel Colorado Marin (MACM)

Built with ❤️ by MACM — Full Stack Developer & Cybersecurity Specialist from Guadalajara, Spain.

• 🌐 Portfolio: miguelacm.es
• 💼 LinkedIn: linkedin.com/in/macm
• 🐙 GitHub: github.com/m-a-c-m