¿Cómo insertar un mapa personalizado de Google Maps en nuestro sitio web?

Google Maps sin personalizar

Si estas cansado de la imagen clásica que utiliza Google Maps para mostrar los datos de una ubicación o de una empresa, y necesitas añadir a tu blog o sitio web corporativo un mapa de Google Maps personalizado, para huir del clásico marcador de Google Maps, pero no tienes suficientes conocimientos de programación, o no quieres complicarte con la Google Maps API, o con la gran cantidad de plugins que existen en Internet, especialmente para WordPress, hoy en APG te vamos a proponer un truco que seguro te va a gustar y lo vas a utilizar mucho a partir de hoy.

Para conseguir nuestro propósito y hacer pasar al olvido la imagen que vemos encima de este párrafo, vamos a necesitar 4 cosas: 2 imágenes, un archivo KML y Google Maps, así de simple.

Las 2 imágenes son, una para personalizar el marcador de Google Maps (Google Maps Pointer), y la otra para mostrar una imagen en la descripción del punto deseado.

En el primer caso recomendamos utilizar un archivo PNG transparente, este punto es de suma importancia ya que sino se verá el fondo de color sobre el mapa, de tamaño reducido, en nuestro caso utilizamos normalmente 61×55 píxeles, tal y como podéis apreciar en la imagen que acompaña a este párrafo.

En el segundo caso recomendamos utilizar un archivo JPG, en nuestro caso utilizamos un tamaño de 78×88 píxeles, que puede contener el isotipo de la empresa, una fotografía de la fachada del negocio, el logotipo del sitio web, o aquello que queramos poner. En principio no recomendamos poner más de una imagen para que la descripción que vamos a mostrar aparezca lo más clara y limpia posible.

En tercer lugar, hemos dicho que necesitamos un archivo KML, que no es más que un archivo basado en XML, que utiliza fundamentalmente Google Earth, aunque también es utilizado por gran cantidad de dispositivos GPS, y que se puede editar fácilmente en cualquier editor de texto. En nuestro caso concreto utilizamos el siguiente código:

Y para personalizarlo a tu gusto sólo necesitarás modificar algunas líneas, así que vamos a dividir el archivo en tres partes y te explicamos un poco en qué consiste cada cosa. En primer lugar tienes la cabecera, y de ella puedes modificar:

• Línea 5: indicando el nombre que tú quieras darle a tu archivo KML.
• Línea 9: indicando el nombre del autor.
• Línea 11: indicando la URL del sitio web que contiene el archivo KML.
• Línea 12: indicando la dirección sin estructurar con los siguientes elementos estándar: calle, ciudad, dirección nacional o código postal..
• Línea 13: indicando el teléfono. Este campo es exclusivo de Google Maps para móviles.

En segundo lugar tienes los datos de la imagen que se va a utilizar como marcador de Google Maps. Para ello sólo debes modificar:

• Línea 1: poniendo el nombre que identificará a la imagen.
• Línea 4: indicando la URL de tu archivo PNG transparente.

Y por último, y para finalizar puedes personalizar la tercera y última parte del archivo KML. Esta es la parte que va incluir la descripción y el archivo JPG que hemos preparado anteriormente. Para este archivo debes tener conocimientos de HTML, aunque también puedes crear el contenido en cualquier editor de texto y guardarlo en formato HTML, de esta forma crearás la descripción que deseas sin tener ningún tipo de conocimiento de programación.

En este caso podemos personalizar:

• Línea 2: indicando el nombre que queremos darle a la carpeta.
• Línea 4: indicando el nombre del sitio.

Enlace de Maps Labs

• Línea 7: indicando la URL de tu archivo JPG, los atributos WIDTH (ancho) y HEIGHT (alto), indicados en píxeles, el atributo ALT (texto alternativo) de la imagen y el atributo STYLE (estilo), si necesitas añadirle algún estilo personalizado a la imagen.
• Línea 9: donde debes añadir todo el código HTML que precises, pero ojo, sé conciso y no abuses, que las pantallas de los usuarios tienen un límite. Lo mejor es poner los datos básicos, nada superfluo.
• Línea 35: donde debes poner exactamente el mismo nombre de identificación que le has puesto anteriormente al archivo PNG transparente.

Google Maps Labs

• Línea 37: Aquí debes indicar las coordenadas en valores de puntos flotantes, pero ojo con el formato, que no es el habitual, de hecho están expresadas de forma inversa, lo normal es poner primero la latitud y después la longitud. El orden correcto y único admitido es longitud, latitud y altitud, siendo opcional éste último. También es importante no incluir ningún tipo de espacio entre los valores. Para averiguar las coordenadas GPS de un sitio en Google Maps, lo más sencillo es pulsar en la parte inferior izquierda sobre el enlace Maps Labs y activar la herramienta Marcador lat.-long., que nos permitirá obtener las coordendas GPS de cualquier punto del mapa desde el menú contextual que aparece pulsando el botón derecho del ratón y seleccionando Visualizar marcador lat.-long.

Menú contextual

Si necesitas saber qué es cada cosa que compone el archivo KML o si necesitas añadirle algún otro componente que en nuestro caso no nos ha sido necesario, puedes ver la referencia completa de los archivos KML aquí.

Por último necesitamos, una vez creados y subidos los 3 archivos a nuestro servidor web, debemos volver a Google Maps para generar el código que vamos a utilizar en nuestro sitio web.

Para obtener este código sólo necesitamos la URL de nuestro archivo KML, en nuestro caso particular es https://artprojectgroup.es/wp-content/uploads/art-project-group.kml, y la introducimos en el buscador de direcciones de Google Maps. Pulsamos sobre el icono de búsqueda o pulsamos ENTER y veremos que por arte de magia Google Maps ha transformado nuestro archivo KML en un mapa personalizado a nuestro gusto. Ahora sólo nos queda obtener el código que necesitaremos para incrustar nuestro nuevo mapa en cualquier página web.

Para ello pulsaremos el icono de enlace que se encuentra junto al icono de impresión, y aparecerá una pantalla desde la que podremos copiar la URL del mapa que tenemos delante, en formato normal o acortada por Google, y el código HTML que nos interesa. Para obtener este código es preferible pulsar sobre Personalizar y obtener vista previa del mapa que se va a insertar y modificar a nuestro gusto el tamaño, el zoom, y todo aquello que precisemos. Una vez finalizado este proceso podemos copiar el código HTML que Google Maps nos ha generado tan amablemente e insertarlo allá donde lo necesitemos y tantas veces como lo necesitemos. En APG solemos utilizar tan sólo el código contenido en la etiqueta IFRAME, descartando el resto del código generado, y personalizando, si lo estimamos necesario, el código obtenido.

Obteniendo el mapa personalizado en Google Maps

En nuestro caso la URL obtenida es https://maps.google.es/maps?q=http:%2F%2Fartprojectgroup.es%2Fwp-content%2Fartprojectgroup%2Fart-project-group.kml&hl=en&sll=36.544148,-4.624944&sspn=0.124535,0.264187&t=h&z=20 en su versión normal, o http://goo.gl/maps/GYhWr en su versión corta, y el código HTML es:

Google Maps personalizado

Como ves gracias a este pequeño truco es extraordinariamente sencillo generar un mapa totalmente personalizado para nuestros sitios web. Y lo mejor que tiene este este sistema es que podemos posicionar en el mapa más de una ubicación, pudiendo mostrar cientos de puntos de forma simultánea, utilizar más de un marcador personalizado, e incluso podemos podemos generar el contenido del archivo KML de forma dinámica a partir del contenido de una base de datos.

Este último ejemplo lo puedes ver en funcionamiento en nuestro cliente Autocaravanas del Sol, donde el mapa que se muestra en la parte superior del contenido de la página es generado con un archivo KML generado al vuelo a partir de un archivo PHP que obtiene los datos de cada uno de los puntos mostrados a partir de una base de datos que se actualiza de forma automática semanalmente a partir del contenido de un listado oficial publicado en formato HTML, al igual que todos los mapas que se muestran para las distintas comunidades autónomas y provincias.

Otra de las ventajas de este sistema es que eres tú quien impone el contenido, y lo puedes modificar siempre que lo precises para mostrar aquello que quieres mostrar y no lo que Google Maps quiere mostrar.

A partir de aquí tú pones el límite a este sistema.

Importante: esta entrada ha quedado obsoleta. Visita Google Maps y los archivos KML para conocer el nuevo procedimiento a seguir.