Si usas el tema Divi en tu web, sabrás que viene completo con un práctico módulo de mapa para incrustar fácilmente Google Maps en tus páginas o entradas. pues bien, tiene la opción de agregar un icono o puntero de mapa (de color rojo), pero en la configuración no hay opción para cambiarlo. Investigando un poco he visto que sí es posible cambiar el icono rojo del mapa en DIVI de una o de varias maneras:

Cambiar el icono rojo del mapa en DIVI editando el tema

En Divi versión 2.4, el icono del mapa utilizado por Divi se encuentra en:

/wp-content/themes/Divi/images/marker.png

Desde Divi versión 2.4, el icono del mapa utilizado por Divi se encuentra en:

/wp-content/themes/Divi/includes/builder/images/marker.png

En este caso es posible sustituir este archivo con una imagen que hayas creado. El reemplazo debe ser 46x43px de tamaño (si es más grande sólo se muestra la esquina superior derecha de la imagen).
El problema con este método simple es que una actualización al tema de Divi podría sobrescribir la imagen, haciendo que con cada actualización vuelva al icono rojo que trae por defecto.

Cambiar el icono rojo del mapa en DIVI editando el .htacces

En lugar de cambiar el icono en los archivos Divi, podemos simplemente interceptar la solicitud de la imagen y redirigir el navegador a otra en su lugar. De esta manera no hay necesidad de editar los archivos de tema. Podemos hacerlo agregando una regla de reescritura al archivo principal de WordPress .htaccess, similar al siguiente:

RewriteEngine On
RewriteRule ^wp-content/themes/Divi/images/marker.png$ http://www.mysite.com/my-custom-pin.png [L]
RewriteRule ^wp-content/themes/Divi/includes/builder/images/marker.png$ http://www.mysite.com/my-custom-pin.png [L]

Esto funciona perfectamente, pero deberías tener cuidado al editar el archivo .htaccess ( es recomendable hacer una copia o backup primero) ya que podría hacerte pasar un mal rato si luego no compila bien.

En este caso también la imagen debe ser 46 x 43px.

Mapa DIVI con icono nuevo

La primera “RewriteRule” está disponible para los sitios anteriores a Divi 2.4, y la última está disponible para los sitios que utilizan Divi 2.4+. Puedes quitar la regla que no necesitas, pero no hay ningún inconveniente en tenerlas allí y así te aseguras que el código funcionará sin alteración con cualquier versión de Divi.

 

Cambiar el icono rojo del mapa en DIVI en la API JavaScript de Google Maps

En teoría existe una solución más limpia que las anteriores, ya que  debería ser posible acceder al icono a través de la API JavaScript de Google Maps. Sin embargo, no he sido capaz de conseguir este trabajo todavía Divi ya que no parece estar manteniendo una referencia a estos objetos, y Google Maps no ofrece una forma obvia para recuperar los existentes. Seguiré intentando…

De todas formas el problema sería que, al modificar directamente desde la API JavaScript de Google Maps, la imagen se mostraría en todas las webs que estén utilizando dicha clave, cosa que, a mi parecer, no es siempre del todo deseable.

En fin, espero que este artículo haya sido de vuestra utilidad y, como siempre, si alguno tiene alguna mejora que aportar a este tema será de agradecer.