Aprende a utilizar la librería google maps con javascript
Aprende a utilizar la librería google maps con javascript
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Este tutorial va a ser una gran introducción a la api de google maps con javascript para cualquier desarrollador con unos mínimos conocimientos del lenguaje.

Curso gratuito de javascript para iniciarte

en 10 minutos y gratis

Existen varios tutoriales gratuitos de javascript en la plataforma de acceso gratuito que te pueden ayudar para iniciarte de forma rápida.


Lo que vamos a hacer a lo largo de este tutorial es iniciar un sencillo mapa, añadir markers, crear infowindows, añadir eventos al mapa y a los markers, realizar trazas, cambiar iconos, y mucho más, la idea es poder cubrir las necesidades de muchos proyectos en un sólo tutorial, espero que te guste.

Creando un mapa con google maps

Lo primero que necesitamos hacer siempre que vayamos a utilizar la api de google maps es generar un proyecto para obtener una API_KEY, para poder obtenerla simplemente debes dirigirte a esta url y seguir 2 sencillos pasos, primero crea el proyecto y después copia tu API_KEY.

Ahora vamos a crear un archivo llamado index.html y añadiremos el siguiente código, el cual será la página principal de nuestro proyecto.

Vamos a detallar todo lo que hacemos en este archivo.

  • Cargamos una hoja de estilos para hacer visible nuestro mapa, ahora la crearemos.
  • Incializamos una variable llamada map para poder acceder más adelante.
  • Cargamos un archivo javascript, aquí será donde escribamos todo el código de google maps.
  • Añadimos un div con id map, aquí será donde se pinte el mapa de google maps.
  • Añadimos al final del archivo el archivo de google maps al que le tenemos que pasar la API_KEY que hemos conseguido y un callback para inicializar el mapa, es importante añadirlo al final para evitar bloqueos utilizando async y defer.

Estilos mínimos para google maps

Si no añadimos unos mínimos estilos al mapa de google, éste no será visualizado en el navegador, para poder hacerlo visible vamos a crear el archivo styles.css y añadimos lo siguiente.

Con ese poco código css tenemos suficiente para que el mapa se pinte correctamente.

Función callback de google maps

Cómo hemos dicho anteriormente, el script de google maps recibe un callback que es una función nuestra que será llamada una vez google maps esté disponible en nuestro sitio, así que vamos a definir dicha función, para ello crea un archivo gmaps.js y añade lo siguiente.

Cómo puedes ver definimos la función initMap, que es la que llamará google maps al estar disponible.
A continuación creamos una instancia de un mapa, el primer parámetro es el contenedor, el segundo un objeto con las opciones que queremos establecer para nuestro mapa, de momento sólo le decimos qué debe mostrar y el nivel de zoom.

Si hemos seguido correctamente todos los pasos veremos lo siguiente.

Primer mapa con google maps
Primer mapa con google maps

Añadir nuestro primer marker a google maps

En google maps un marker es una ubicación, y lo único que necesita es saber el mapa donde tiene que ser pintado y la latitud y longitud.

Para tener algo que sea rehusable, lo mejor es crear una función que nos permita añadir markers, así que vamos a añadirla a nuestro archivo gmaps.js.

Ahora ya podemos añadir markers a nuestro mapa, para ello simplemente vamos a añadir el siguiente código al final de la función initMap.

Si lo hemos hecho bien tendremos el siguiente resultado.

Añadir markers a google maps con javascript
Añadir markers a google maps con javascript


Cuando trabajamos con google maps y queremos interactuar con los markers el proceso normal es crear un array global e insertar cada marker que sea añadido al mapa, así que vamos a hacer unas pequeñas modificaciones a nuestro código, primero vamos a declarar la variable markers en el index.html.

Y ahora vamos a modificar el archivo gmaps.js con el código hasta este momento pero utilizando el array markers.

Cambiar el icono de los markers en google maps

Algo completamente necesario es poder cambiar la imagen de los markers, para poder realizar esta tarea simplemente debemos establecer la propiedad icon del marker de la siguiente forma.

Ahora el resultado será el siguiente.

Cambiar el icono de los markers de google maps
Cambiar el icono de los markers de google maps

Añadir eventos a los markers

Si queremos interactuar con los markers de alguna forma, por ejemplo con un evento click, podemos añadir un listener modificando la función addMarker de la siguiente forma.

Si ahora pulsas en el marker podrás ver en la consola del navegador la latitud y longitud del marker.

Añadir infowindows a los markers

Los infowindows son completamente necesarios en cualquier aplicación que utilice google maps, éstos nos permiten montar un trozo de html para que cuando el marker sea pulsado se muestre con la información que nosotros deseemos.

Para crear un infowindow y asociarlo a nuestro marker vamos a hacer unas pocas modificaciones, primero vamos a declarar otra variable global en el index.html.

Para crear la instancia del infowindow vamos a modificar el archivo gmaps.js.

Si lo hemos hecho todo bien el resultado será el siguiente cuando pulsemos en el marker.

Añadir infowindows a los markers de google maps
Añadir infowindows a los markers de google maps


¿Te interesa el desarrollo web y móvil?

revisa los cursos de cursosdesarrolloweb.es

Tenemos cursos sobre desarrollo web y móvil utilizando siempre las últimas tecnologías con php y javascript, NodeJS, Angular, React, Vue.js, Laravel, Codeigniter, WordPress y mucho más.

Mostrar y ocultar los markers

Para poder interactuar aún más con el mapa, ahora vamos a definir una nueva función para poder mostrar y ocultar los markers dependiendo de si están visibles o no.

Lo primero que vamos a hacer es modificar el archivo styles.css.

Ahora vamos a abrir el archivo index.html para añadir un botón con un evento click para ejecutar la función encargada de mostrar y ocultar los markers.

Para hacer que todo funcione sólo debemos añadir una nueva función a nuestro archivo gmaps.js.

De esta forma tan sencilla podemos ocultar los markers cuando estén visibles o mostrarlos cuando estén ocultos.

Cambiar los estilos de google maps

Otra cosa que podemos hacer y en muchos casos será útil es cambiar los estilos del mapa de google maps, para ello debemos establecer la propiedad styles de nuestro mapa de la siguiente forma.

Si lo hemos hecho bien veremos la siguiente imagen.

Cambiar los estilos del mapa de google maps
Cambiar los estilos del mapa de google maps


Si necesitas personalizar tus mapas te recomiendo revisar la documentación.

Si te resulta interesante, ayúdame a difundir compartiendo el post


[easy-social-share buttons=”facebook,twitter,google,pinterest,linkedin” style=”vertical” message=”yes” template=”54″ fullwidth=”yes”]

Deshabilitar los controles del mapa

Otra cosa que puede ser útil es la posibilidad de deshabilitar los controles que aparecen en el mapa por defecto, por ejemplo los botones para seleccionar el tipo de mapa o incrementar y decrementar el nivel de zoom.

Par poder deshabilitar este tipo de controles de nuestros mapas simplemente debemos establecer la propiedad disableDefaultUI a false en nuestro mapa de la siguiente forma.

Si recargas la página verás que ya no tenemos ningún control en el mapa.

Deshabilitar los controles de google maps
Deshabilitar los controles de google maps

Trazar rutas en google maps

Cuando tengas que desarrollar aplicaciones que por ejemplo tengan que trazar rutas, algo con lo que tendrás que trabajar es con las Polylines, nos permiten dibujar en el mapa a partir de unas coordenadas de forma muy sencilla, veamos un ejemplo.

Cómo puedes ver, utilizamos la clase Polyline, definimos la ruta a trazar, podemos utilizar tantos puntos como necesitemos, establecemos una pequeña configuración para decir de que forma queremos mostrar la ruta y finalmente la asignamos al mapa con setMap.

Recuerda añadir la llamada a la función addPolyline en initMap y verás lo siguiente.

Realizar trazas en google maps
Realizar trazas en google maps

Definir la dirección de un Polyline en google maps

Poder definir una ruta está bien, pero si no podemos decir cual es el punto a y el punto b, es difícil que alguien sepa la dirección correcta, para solucionar este problema podemos definir un icono de la siguiente forma.

Definimos la variable lineSymbol y la utilizamos a través de la propiedad icons de la Polyline, el resultado ahora será el siguiente.

Definir la dirección de una polyline en google maps
Definir la dirección de una polyline en google maps


Cómo puedes ver, google sabe desde donde hemos partido, con esa información la flecha será creada de forma correcta, con offset le decimos la posición en la que queremos que aparezca, en este caso en el centro.

Si en cambio quieres que la flecha se repita, por ejemplo, cada 100px, podemos hacer lo siguiente en la propiedad icons de la Polyline.

Y el resultado será el siguiente.

Múltiples iconos en las Polylines
Múltiples iconos en las Polylines

Y de momento eso es todo, con eso tenemos bastante para utilizar la librería google maps con javascript desde 0 con funcionalidades bastantes atractivas, a continuación dejo el código javascript completo por si te interesa.