Saltar al contenido

¿Cómo Vectorizar Mapas en Google Maps?

10 junio, 2019

La aplicación conocida como Google Maps, producida por la empresa a la que accionó su nombre. Está desarrollada o creada utilizando vectores y códigos API de JavaScript. Por ende, los mapas ubicados en esta aplicación no son necesariamente estáticos como la lógica dictaría.

En algunos momentos nos encontraremos con la necesidad de expandir estos mapas para mostrará en ellos información extra. Para realizar esto utilizaremos los vectores que solamente son formas creadas por puntos. Y como ejemplo de esta ocasión, los usaremos para añadir marcadores personalizados en nuestro mapa.

¿Cómo Agregar un Marcador a un Mapa en Google Maps Utilizando sus Vectores?

Para poder agregar un marcador a nuestro mapa, primero tendremos que incluir el API junto con sus estilos para la visualización del mapa. Para esto necesitaremos de utilizar nuestra que credencial de desarrollador de Google. De modo que si no contamos con esta, no podremos llevar a cabo este procedimiento.

A continuación, deberemos establecer cuáles van a ser nuestras variables globales. Una de estas variables tendrá que ser llamada mapa. Mientras que las demás serán utilizadas para generar marcadores de acuerdo a las coordenadas que necesitemos.

Para proseguir, tendremos que determinar la función de inicialización del que va a ser nuestro mapa. Esta función de inicialización contendrá opciones tales como el tipo de base para el mapa, el zoom y las coordenadas del mismo. Buscaremos obtener de igual manera, el ID del div por el DOM E iniciales amos del mapa.

De igual manera, vamos a construir una función del comando eventosMarcador(). En la cual vamos a definir los eventos que llamaran a las funciones de encargadas de fijar los marcadores que necesitemos. Pero antes de poder construir dichas funciones tendremos que determinar ciertas características.

Tendremos que determinar los valores aleatorios que serán generados sobre las coordenadas de nuestro mapa. Para que éstas puedan ser interpretadas mediante el API del JavaScript de Google Maps. Realizaremos dicha acción, aplicando operaciones aritméticas sobre las coordenadas globales y sus variables.

Para Finalizar Fijamos Marcadores en el Mapa

Habiendo culminado con esto, construiremos en las funciones para fijar marcadores en el mapa sobre el que estamos trabaja. Utilizaremos de esta manera el método Marker que será el encargado de generar un marcador. Aunado a la función anteriormente programada, generaremos así las coordenadas donde se despliegue dicho marcado.

En esta parte del procedimiento, deberíamos tener en cuenta que para añadir nuestros marcadores personalizados. Sus iconos han de estar en la disposición del directorio de nuestro proyecto. Esto para que no haya ninguna problemática al momento de añadir dichos iconos al mapa.

Tras habernos asegurado de que los iconos que utilizaremos se encuentran en el directorio de nuestro proyecto. Llegó el momento de construir una función, ante la cual comenzaremos por crear un array que incluya los nombres identificativos de los elementos a utilizar.

Los iconos que hemos identificado, tendremos que acomodarlos de manera aleatoria. Otorgando un parámetro adicional al método Marker con el que estábamos trabajando el cual va a ser llamado icon. Ahora agregaremos a nuestro código elemento que iniciará el mapa.

A estas alturas, ya debería estar nuestro mapa preparado para agregar tanto marcadores standard como los nuestros personalizados. De manera que solo tendremos que seleccionar aquel que nosotros deseamos. Podemos probar esto agregando tantos marcadores como queramos en puntos aleatorios del mapa.

¿Nos das 5 estrellas? ?