Saltar al contenido
Hacer mapas

Mapas para tu web

Elige un widget, pon el lugar, los colores y el tamaño, y copia el código. Vale para cualquier web en la que puedas pegar HTML: WordPress, Wix, Squarespace, Shopify… Gratis, sin registro y sin cookies.

Elige el widget

Un círculo alrededor de un punto, con su área y su perímetro.

Centro del círculo

Ejemplo 40.41678, -3.70379 · También valen unas coordenadas: «40.4168, -3.7038».

Por ejemplo, el de tu tienda. Sale junto al centro del círculo.

Unidades

Sin marcar, el círculo queda fijo: lo mejor para una zona de reparto o de servicio.

Aspecto
Tema
Color
Idioma del widget
Tamaño

Ocupa todo el ancho de su hueco, también en el móvil. Tú eliges el alto.

Más opciones

Lo leen los lectores de pantalla: di qué enseña el mapa.

El widget no se carga hasta que el visitante llega a él: tu página abre antes.

Vista previa

Abrir el widget en otra pestaña

Código para pegar en tu web

Es opcional: el widget funciona igual sin él. Si lo dejas, ayudas a que Mapsfera siga siendo gratis.

<iframe
  src="https://mapsfera.pages.dev/es/embed/radio/#lat=40.41678&lng=-3.70379&r=10&u=km&name=Puerta+del+Sol"
  style="border:0;width:100%;height:420px"
  title="Mapa con un radio de 10 km alrededor de Puerta del Sol"
  loading="lazy"
  referrerpolicy="no-referrer"
  allowfullscreen>
</iframe>
<p style="margin:6px 0 0;font-size:14px">Hecho con el <a href="https://mapsfera.pages.dev/es/herramientas/radio-en-el-mapa/">mapa de radio</a> de Mapsfera</p>

Siguiente paso

Las herramientas completas, con todo lo que no cabe en un widget.

Radio en el mapaVarios círculos, las provincias que tocan, PNG, GeoJSON y KML. Distancia entre dos puntosTambién por carretera, en coche, en bici o a pie. Insertar Google Maps en tu webEl código para insertar un mapa de Google o de OpenStreetMap.

Cómo se usa

  1. Elige el widget

    Radio en el mapa, distancia entre dos puntos o mapa mudo.

  2. Configúralo

    El centro y el radio, los dos puntos o el mapa; el tema claro u oscuro, el color, el idioma y el tamaño. La vista previa cambia al momento, y puedes verla con el ancho de un móvil.

  3. Copia y pega

    Pulsa «Copiar el código» y pégalo en un bloque de HTML de tu web. Más abajo tienes los pasos para las plataformas más usadas.

Para qué sirve cada widget

  • Radio en el mapa

    Una zona de reparto, de servicio o de influencia: un círculo de 5 km alrededor de tu tienda, con su área. Si dejas que los visitantes lo muevan, es una calculadora de radio para un artículo o una guía.

  • Distancia entre dos puntos

    La distancia en línea recta desde tu hotel, tu club o tu evento hasta otro sitio. O una calculadora para que tus lectores midan arrastrando los dos puntos.

  • Mapa mudo

    Para blogs de clase, de geografía o de viajes: España por provincias o por comunidades, cada comunidad, Europa, el mundo y Estados Unidos, en blanco o con números, nombres o capitales. Al tocar una región, sale su nombre.

  • Con el aspecto de tu web

    Tema claro, oscuro o automático, el color de tu marca y el idioma, inglés o español. El widget no trae fuentes ni estilos que choquen con los tuyos: va en su propio marco.

Cómo funciona

El código es un <iframe>, la etiqueta de HTML que enseña una página dentro de otra: una página de Mapsfera hecha solo para eso, sin menús ni anuncios. Lo que eliges va en su dirección, después de la almohadilla (#): el punto, el radio, las unidades, el tema y el color. Lo que va detrás de la almohadilla no llega a ningún servidor, y puedes cambiarlo a mano.

Las cuentas son las de las herramientas completas. El área del círculo se calcula sobre la esfera, que es el círculo que se dibuja en el mapa. La distancia se mide sobre el elipsoide WGS84 con GeographicLib, la misma referencia que usa el GPS: es la línea más corta sobre la Tierra, que en el mapa sale curva en los trayectos largos.

Los mapas de radio y de distancia usan MapLibre con el mapa base de OpenFreeMap (datos de OpenStreetMap). El mapa mudo es un dibujo en SVG que llega hecho dentro de la página: no carga teselas ni motor de mapas.

Área del círculo sobre la esfera

A = 2πR² (1 − cos(r/R))

r es el radio y R, el radio medio de la Tierra, 6.371 km. Para radios de pocos kilómetros da casi lo mismo que π · r²; para 500 km, algo menos.

El enlace a Mapsfera

Cada widget lleva al pie un enlace normal a la herramienta completa de Mapsfera, con el mismo círculo o los mismos puntos, y el código que copias añade otro debajo del iframe, ya en tu página. Son enlaces como cualquier otro, sin trucos.

El de debajo del iframe es opcional: desmarca «Incluir el enlace a Mapsfera» o bórralo del código, y el widget funciona igual. Si lo dejas, ayudas a que otras personas encuentren estas herramientas y a que sigan siendo gratis. Te lo pedimos porque es así como se mantiene Mapsfera, no porque haga falta.

Privacidad: sin cookies y sin rastreo

El widget no pone cookies, no guarda nada en el navegador de tus visitantes (ni almacenamiento local ni bases de datos) y no lleva analítica, anuncios ni botones de redes sociales. Tampoco usa el buscador de lugares ni pide la ubicación del visitante.

Lo que sí pasa, como con cualquier cosa incrustada: el navegador del visitante descarga la página del widget de Mapsfera y, en los de radio y distancia, el mapa base de OpenFreeMap. Los dos reciben su dirección IP, como cualquier web que se visita. El mapa mudo no se conecta a nadie más.

El código lleva referrerpolicy="no-referrer": el navegador no le dice a Mapsfera desde qué página se carga el widget.

Rendimiento: no frena tu página

Con loading="lazy", el navegador no descarga el widget hasta que el visitante se acerca a él. Dentro, el motor del mapa (MapLibre) solo se descarga cuando el widget está a la vista, y sin el sombreado del relieve, para pedir menos teselas.

El widget no salta mientras carga: el hueco del mapa y el de las cifras están reservados desde el principio. Y usa la letra del sistema, así que no descarga fuentes.

Parámetros de la dirección

Si prefieres cambiar el widget a mano, esto es lo que puede ir después de la almohadilla (#) de su dirección, separado por «&». Lo que no pongas toma su valor por defecto.

WidgetParámetroQué hace
Todos theme=light | dark | auto Tema claro, oscuro o el del dispositivo del visitante. Por defecto, claro.
Todos accent=1f7a4c Color de acento: seis cifras hexadecimales, sin «#».
Radio lat=40.41678&lng=-3.70379 Centro del círculo, en grados decimales.
Radio r=10&u=km Radio (hasta 500) y unidades: km o mi.
Radio name=Mi tienda Nombre junto al centro (hasta 60 letras).
Radio edit=1 El visitante mueve el círculo y cambia el radio.
Distancia a=40.4168,-3.7038&b=41.3874,2.1686 Los dos puntos, «latitud,longitud».
Distancia na=…&nb=…&u=km Nombres de A y B, y unidades.
Distancia edit=0 A y B quedan fijos (por defecto, el visitante los mueve).
Mapa mudo labels=none | numbers | names | capitals Sin rótulos, con números, con nombres o con capitales.
Mapa mudo explore=0 Sin el nombre al tocar una región.
Mapa mudo canarias=0 España sin Canarias, encuadrada en la península y Baleares.

El idioma va en la ruta: /es/embed/… en español y /embed/… en inglés. El mapa mudo, también: /es/embed/mapa-mudo/espana-provincias/.

Cómo pegarlo en WordPress, Wix, Squarespace o Shopify

En casi todas las plataformas hay un bloque o un elemento para pegar HTML. Los pasos generales, según la ayuda de cada una:

WordPress

En el editor de bloques, añade un bloque «HTML personalizado» y pega el código. En WordPress.com, según tu plan, el editor puede quitar los iframe: si desaparece al guardar, mira qué permite tu plan.

Ayuda de WordPress.com: bloque HTML personalizado

Wix

En el editor, añade el elemento para insertar código («Insertar HTML» o «Embed HTML», en el apartado de insertar código), pulsa «Introducir código», pega el código y ajusta el tamaño del elemento.

Ayuda de Wix: insertar un sitio o un widget

Squarespace

Añade un bloque de código («Code»), elige el modo HTML y pega el código. Algunos planes no permiten iframes en el bloque de código: si no se ve, revisa tu plan.

Ayuda de Squarespace: bloques de código

Shopify

En el editor del tema, añade una sección «Liquid personalizado» (Custom Liquid) y pega el código. En una página, también vale el botón «Mostrar HTML» (<>) del editor de contenido.

Ayuda de Shopify: páginas de la tienda

Son los mismos que para un mapa de Google: en Insertar Google Maps en tu web tienes también cómo hacerlo con un mapa de Google o de OpenStreetMap.

Preguntas frecuentes

¿Es gratis?

Sí. No pide registro, ni clave, ni pago, y puedes usarlo en una web personal o en la de tu negocio.

¿Tengo que dejar el enlace a Mapsfera?

No. El enlace de debajo del widget es opcional: quítalo si lo prefieres y el widget funciona igual. El pie de dentro del widget sí se queda: lleva a la herramienta completa y está junto a la atribución de los datos del mapa.

¿El widget pone cookies o rastrea a mis visitantes?

No. No pone cookies, no guarda nada en el navegador y no lleva analítica ni anuncios. Como cualquier cosa incrustada, el navegador del visitante se conecta a Mapsfera para cargarlo y, en los mapas de radio y distancia, a OpenFreeMap para el mapa base; los dos reciben su dirección IP.

¿Tengo que avisar de cookies por el widget?

El widget no guarda cookies ni datos en el navegador de tus visitantes, así que no añade nada a lo que tu aviso de cookies tenga que contar. Lo que necesite tu web depende del resto de lo que use. Esto es información general, no asesoramiento legal.

¿Se ve bien en el móvil?

Sí, con el tamaño «Adaptable»: ocupa el ancho de su hueco, y lo hemos probado de 300 a 800 px. Con un tamaño fijo, se encoge para no salirse. En los mapas mudos, los rótulos se ven desde 560 px de ancho; en pantallas más estrechas, el nombre sale al tocar.

¿Puedo cambiar el lugar o el radio después?

Sí. Vuelve aquí y copia el código otra vez, o cambia a mano lo que va después de la almohadilla (#) en la dirección del iframe: lat, lng, r, u… Tienes la lista en «Parámetros de la dirección».

¿Frena la carga de mi página?

Muy poco. Con loading="lazy", el navegador no carga el widget hasta que el visitante llega a él, y el mapa de radio o de distancia no se descarga hasta que se ve. El mapa mudo es un dibujo ligero, sin teselas.

¿Por qué la distancia es en línea recta y no por carretera?

Para calcularla por carretera hace falta un servidor de rutas, y los públicos y gratis no están pensados para atender a miles de webs a la vez. El widget da la distancia en línea recta, la más corta sobre la Tierra; la de carretera la tienes en la herramienta completa, a un clic desde el pie del widget.

¿Puedo poner varios widgets en la misma página?

Sí: cada uno es un iframe independiente, con su lugar, su tema y su color.

¿Puedo usar los mapas mudos en clase o en una web comercial?

Sí. Los límites de España son del IGN (CC BY 4.0), los del mundo y Europa, de Natural Earth (dominio público), y los de Estados Unidos, del Census (dominio público). El pie del widget cita la fuente: no lo quites.

Herramientas relacionadas

Todas las herramientas
Mapas temáticos Mapas ya hechos de población, edad y renta con datos oficiales, gratis para descargar o incrustar. Póster de mapa personalizado Diseña un póster con el mapa de tu ciudad o de tu ruta, con tus colores y tu texto, y descárgalo gratis. Insertar Google Maps en tu web Genera el código para insertar un mapa de Google Maps en tu web, con el tamaño y el zoom que quieras. Comparar el tamaño de países Arrastra países por el mapa y compara su tamaño real, sin la deformación de la proyección de Mercator. Visor de GPX Abre un track GPX en el mapa para ver la ruta y su distancia, y pásalo a KML o GeoJSON. Visor de GeoJSON Suelta un fichero GeoJSON para verlo en el mapa, revisar sus elementos y pasarlo a KML o GPX.

Fuentes