Cómo crear marcadores de mapa personalizados (la guía completa)
Si alguna vez has intentado añadir marcadores de mapa personalizados a un sitio de directorio, un mapa Leaflet o un panel de Mapbox, ya conoces el problema.
Los marcadores predeterminados parecen genéricos.
Si alguna vez has intentado añadir marcadores de mapa personalizados a un sitio de directorio, un mapa Leaflet o un panel de Mapbox, conoces el ciclo.
Los predeterminados parecen genéricos. Las herramientas gratuitas existentes tienden a cubrir una sola biblioteca de iconos (normalmente Font Awesome) y solo exportan PNG.
En el momento en que necesitas un marcador que use un icono de Lucide, que coincida exactamente con los colores de tu marca, o que salga como SVG limpio que puedas recolorear con CSS, vuelves a Illustrator o pegas rutas SVG en un CodePen..
Llevamos más de 12 años desarrollando GeoDirectory y los marcadores de mapa personalizados aparecen en los tickets de soporte cada semana sin excepción.
Así que construimos la herramienta que ojalá hubiera existido: MapMarker Studio.
Es gratuita, funciona en el navegador, no requiere registro, incluye más de 40.000 iconos, permite descargar marcadores de mapa SVG o PNG con píxel perfecto y genera código listo para pegar para todas las principales plataformas de mapas.
Esta publicación es la guía completa para crear marcadores de mapa personalizados.
Qué son, por qué los predeterminados se quedan cortos, cómo diseñar buenos marcadores y cómo añadirlos realmente a tu mapa.
¿Qué es un marcador de mapa personalizado?
Un marcador de mapa es el indicador visual que fija una ubicación en un mapa.
Todas las plataformas de mapas incluyen uno predeterminado.
Google Maps tiene su gota roja, Leaflet tiene un pin azul y Mapbox usa un círculo.
Funcionan, pero son olvidables.
Cuando tienes más de un tipo de ubicación en un mapa (restaurantes vs. hoteles, abiertos vs. cerrados, gratuitos vs. de pago), necesitas diferenciación visual que los marcadores predeterminados no te ofrecen.
Un marcador de mapa personalizado es cualquier marcador que hayas diseñado o personalizado tú mismo.
Diferente forma, diferente color, un icono en su interior, una etiqueta, una sombra... lo que ayude a los usuarios a explorar el mapa más rápido.
Hay tres categorías que vale la pena conocer.
Marcadores basados en imágenes son archivos PNG o SVG colocados en el mapa en coordenadas específicas.
Simples, universales, compatibles en todas partes. La contrapartida es que el PNG no se escala con nitidez en pantallas retina a menos que uses SVG, y cambiar el color implica volver a exportar.
Marcadores de símbolo o icono son formas vectoriales dibujadas por la propia biblioteca de mapas y estilizadas con código.
Nítidos a cualquier nivel de zoom, fáciles de recolorear al vuelo. Nativos en bibliotecas como Mapbox GL y Leaflet (mediante plugins).
Marcadores HTML utilizan un elemento HTML completo como marcador. Útiles para clústeres, insignias informativas y pines animados.
Más flexibles, pero más costosos de renderizar a gran escala.
Para el 90% de los casos de uso en directorios y paneles de control, los marcadores de imagen SVG son la opción correcta. Nítidos, ligeros, fáciles de cambiar de color y compatibles con todas las plataformas.
Por qué los marcadores predeterminados se quedan cortos
Tres razones por las que la gente acaba necesitando marcadores personalizados.
Múltiples categorías en un mismo mapa. Si tu mapa muestra restaurantes, hoteles y gasolineras, necesitas tres marcadores visualmente distintos. La misma forma con diferentes iconos, o el mismo icono con diferentes colores. Los predeterminados te dan solo uno.
Coherencia de marca. Un panel de control SaaS con grises neutros y un único color de acento no debería tener un pin rojo de Google desentonando. El marcador forma parte de la interfaz.
Densidad de información. A menos que estés usando una extensión de agrupación de marcadores, un mapa con 200 marcadores necesita marcadores más simples y pequeños que uno con 8. El predeterminado está dimensionado para una «densidad moderada» y queda mal en ambos extremos.
Qué hace bueno a un marcador de mapa
Años construyendo mapas para sitios WordPress nos han enseñado algunas reglas. Ninguna sorprende. La mayoría de las herramientas existentes las ignoran de todos modos.
Reconocible en tamaños pequeños. La mayoría de los marcadores se muestran entre 24 y 32 píxeles. Si tu icono no se puede leer a ese tamaño, el marcador falla. Prueba entornando los ojos.
Alto contraste con el mapa. Los marcadores claros sobre fondos de mapa claros desaparecen. Elige un color de relleno y un borde contrastante para que el marcador se vea bien en temas satélite, de calle y oscuros.
Una silueta de forma clara. El pin en forma de gota es icónico por algo. Tiene una «punta» clara que señala la ubicación. Los círculos, cuadrados y hexágonos funcionan bien, pero un marcador sin un punto de anclaje claro puede hacer que los usuarios malinterpreten a qué punto del mapa se refiere.
El icono dentro del marcador, no junto a él. Los marcadores con el icono fuera (estilo etiqueta) saturan el mapa. Mantén el significado dentro de la silueta.
Tres colores como máximo. Marcador, icono y un acento. Más de eso, y el marcador tiene demasiados elementos a tamaños pequeños.
Las 8 formas de marcador que cubren el 95% de los casos de uso
Probamos docenas de siluetas de marcadores en mapas reales de GeoDirectory. Estas ocho resuelven casi todo.
- Pin (gota clásica). El icónico pin de Google Maps. El mejor predeterminado.
- Círculo. Minimalista y moderno. Ideal para mapas de alta densidad.
- Cuadrado redondeado. Aspecto de Material Design. Ideal para interfaces de estilo app.
- Cuadrado. Nítido y técnico. Ideal para paneles de arquitectura o de datos.
- Bandera. Sensación de destino y meta. Perfecto para eventos y puntos de inicio/fin.
- Escudo. Seguridad, protección, oficialidad. Ideal para servicios de emergencia o listados verificados.
- Hexágono. De moda en tecnología y visualización de datos. Ideal para paneles modernos.
- Burbuja de diálogo. Contextos de reseñas y chat. Ideal para testimonios o marcadores de comentarios.
MapMarker Studio incluye los ocho como puntos de partida.
Elegir el icono adecuado
El icono dentro del marcador es el que transmite el significado. Elige el icono equivocado y hasta el marcador más bonito fracasa. Algunas pautas.
Usa una sola biblioteca de iconos en todo tu mapa. Mezclar Font Awesome con Lucide y SVGs personalizados genera ruido visual. Elige una biblioteca y cíñete a ella.
Combina el estilo del icono con el del marcador. Iconos con contorno para marcadores con contorno, iconos rellenos para marcadores rellenos. La coherencia de estilo importa más que la biblioteca que elijas.
Evita iconos con trazos finos. Un trazo de 1px desaparece al tamaño de un marcador. Elige iconos con grosores de 1,5px o superiores, o bibliotecas que ofrezcan múltiples grosores (Phosphor es excelente para esto).
MapMarker Studio incluye 14 de las mejores bibliotecas de iconos: Lucide, Phosphor, Tabler, Font Awesome, Heroicons, Material Symbols, Iconoir, Remix, Boxicons, Bootstrap Icons, Mage, Octicons, Radix y Simple Icons (para logos de marcas como Airbnb, Starbucks y TripAdvisor).
Más de 40.000 iconos en total. Todos gratuitos para uso comercial.
Cómo añadir marcadores personalizados a tu mapa
El código exacto depende de tu plataforma. Aquí te explicamos cómo funciona en las más comunes, incluida la parte que suele causar problemas.
Leaflet
const customIcon = L.icon({ iconUrl: 'https://your-cdn.com/marker.svg', iconSize: [32, 40], iconAnchor: [16, 40], // tip of the marker popupAnchor: [0, -40] }); L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);
El truco:
iconAnchorMapbox GL JS
const el = document.createElement('div'); el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)'; el.style.width = '32px'; el.style.height = '40px'; el.style.backgroundSize = 'contain'; new mapboxgl.Marker(el) .setLngLat([-74.0060, 40.7128]) .addTo(map);
El truco: Mapbox usa el orden
[lng, lat][lat, lng]Google Maps
new google.maps.Marker({ position: { lat: 40.7128, lng: -74.0060 }, map: map, icon: { url: 'https://your-cdn.com/marker.svg', scaledSize: new google.maps.Size(32, 40), anchor: new google.maps.Point(16, 40) } });
El truco: Google Maps almacena en caché las URL de los iconos de forma agresiva. Si estás probando cambios en la misma URL de SVG, añade un
?v=2GeoDirectory
Para los usuarios de GeoDirectory, los marcadores personalizados se configuran en Categorías → Editar categoría → Icono de categoría predeterminado. Sube el SVG o PNG, y GeoDirectory lo usará automáticamente en todos los listados de esa categoría.
Image URL: https://your-cdn.com/restaurant-marker.svg Recommended size: 36×46 px
MapMarker Studio genera un archivo SVG listo para GeoDirectory con las dimensiones y el punto de anclaje correctos. Súbelo y listo.
Diseña una vez, exporta a todas partes
La razón por la que creamos MapMarker Studio es el ciclo descrito arriba. Diseñas un marcador en Figma, exportas un SVG, escribes la configuración de Leaflet de memoria (y te equivocas con el iconAnchor la primera vez), pruebas, corriges y publicas. Y repites esto para cada categoría de tu mapa.
La herramienta reduce ese ciclo a cuatro pasos.
- Elige una forma (8 opciones).
- Elige un icono (más de 40.000 en 14 bibliotecas).
- Elige colores.
- Código listo para copiar y pegar en Leaflet, Mapbox y Google Maps. O descarga el SVG/PNG directamente para la mayoría de los plugins de mapas y directorios de WordPress.
Todo funciona en tu navegador. Sin registro. Sin subida a ningún servidor. Gratis.
Una nota sobre el formato de archivo
Si te quedas con una sola idea de esta guía: usa SVG. El PNG es aceptable como alternativa cuando tu plataforma realmente no admite SVG, pero eso es poco frecuente en 2026.
SVG se mantiene nítido en cualquier nivel de zoom, tiene tamaños de archivo más pequeños para la complejidad típica de los marcadores y admite recoloreado mediante variables CSS. PNG pierde calidad en pantallas retina a menos que incluyas variantes 2× y 3×.
La única excepción es el rendimiento a escala extrema. Los mapas con 1.000 o más marcadores simultáneos pueden renderizarse ligeramente más rápido con PNG. Para todo lo que esté por debajo de ese umbral, SVG es la opción correcta.
Para terminar
Los marcadores de mapa personalizados son una de esas tareas que parecen que deberían llevar 10 minutos y terminan llevando dos horas. La mayor parte de la fricción está en las herramientas.
Cada solución existente es demasiado restrictiva, demasiado cara o demasiado genérica.
Creamos MapMarker Studio porque nosotros mismos nos habíamos topado con esta pared decenas de veces en instalaciones de GeoDirectory.
Es gratuito, seguirá siendo gratuito y funciona con todas las plataformas de mapas en las que pudimos pensar.
Si encuentras un caso de uso que no cubre, háznolo saber. La herramienta mejora cuando lo haces.
Boletín - ¡Mantente al día!
Recibe las últimas noticias, consejos y contenido exclusivo directamente en tu bandeja de entrada.
