Cómo vectorizar mapas o utilizar vectores en Google Maps - Método muy fácil

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.

En este post te enseñaremos las maneras disponibles para usar ciertos vectores relevantes presentes en el API de Javascript de Google Maps. A su vez, todo el proceso podrá ser realizado desde tu PC sin ingún tipo de inconveniente. Si te interesa este tema, te recomendamos seguir leyendo para aprender a utilizar vectores en Google Maps.

Por lo general, los mapas creados a partir del API de Javascript de Google Maps no serán estáticos todo el tiempo. Por tanto, de vez en cuando necesitaremos extender el alcance de dichos mapas para así poder desplegar la información extra.

Dicha información es incluida gracias a los vectores, los cuales corresponden a formas compuestas por puntos. A su vez, la mayoría de los vectores usados por el API también son denominados como overlays. Para que puedas ingresar a Google Maps solo debes buscarlo desde tu navegador con tu cuenta abierta.

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.

Aunque un poco más abajo te daremos algunos API que puedes usar solo basta con que te guíes sin saltarte ni un solo paso para que puedas completar el proceso con exito.

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.

Antes de que pases a los pasos finales, es muy importante que sepas como puedes ver el trafico en Google Maps, seguramente que sepas eso te va a evitar muchas molestias demás de que te ayudará a llegar mucho más rápido cuando hayan trancones porque te indicará la ruta más rápida.

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.

Cómo añadir marcadores al mapa usando el API de javascript en Google Maps

Los mapas creados con el API se utilizan generalmente para mostrar la ubicación exacta de una compañía en un portal web. Por lo general a esto lo llamamos como punto de interés el cual puede ser representado con un vector determinado.

Este es conocido como “marcador” en el lenguaje de API de JavaScript de Google Maps. Para saber cómo añadir estos famosos marcadores a tu mapa personalizado, te invitamos a seguir leyendo.

Antes de iniciar con estas indicaciones, queremos recomendarte un tutorial donde sabrás la lista completa de todas las funciones, utilidades, prestaciones y trucos de Google Maps, así podrás saber como manejarlo de una mejor manera.

Instrucciones para Añadir un Marcador Personalizado en el Mapa

• Primero debes incluir el API para poder visualizar nuestro mapa personalizado. En este paso es fundamental usar la credencial de desarrollador de google para que el siguiente ejemplo pueda funcionar de forma adecuada:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key
=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
</script>
<style type="text/css">
			 html { height: 100% }
			 body { height: 100%; margin: 5; }
			 #mapaDiv { width: 800px; height: 500px; }
</style>

• Ahora debemos definir las variables globales, una de ellas debe llamarse “mapa” y también una cantidad de variables que serán usadas para elaborar marcadores de forma aleatoria.
• Todo esto con respecto a las coordenadas que bordean una zona cualquiera que en este caso será Madrid.  Para ello ingresa la siguiente función:

var mapa;
			 var minLat = 38,
		 		maxLat = 41,
				 minLng =-3,
				 maxLng =-9,
				 markerId = 1;

• Posteriormente debemos definir la función de inicialización de nuestro mapa, esta va a contener las opciones fundamentales para el zoom, el tipo de base para nuestro mapa y las coordenadas centrales que en esta ocasión van a ser las de la Ciudad de Madrid.
• Para ello tenemos que obtener la ID del div por el DOM, luego iniciamos el mapa y procedemos a definir una función para controlar los eventos que ocurran al ubicar los marcadores en nuestro mapa. Más adelante te mostraremos el código que debes ingresar:

function inicializarMapa() {
 
				 google.maps.visualRefresh = true;
 
				 var mapOptions = {
						 center: new google.maps.LatLng(40.41678, -3.70379),
			 			zoom: 5,
						 mapTypeId: google.maps.MapTypeId.ROADMAP
				 };
 
				 var mapElement = document.getElementById('mapaDiv');
				 mapa = new google.maps.Map(mapElement, mapOptions);
				 eventosMarcador();
			 }

• Luego toca elaborar una función “eventosMarcador”. La cual debe poseer en su definición 2 eventos atados a través de un click según el ID que se presione desde 2 vínculos distintos. A su vez dichos enlaces deben llamar a dos funciones adicionales que se van a encargar de fijar los siguientes marcadores:

function eventosMarcador() {
			 document.getElementById('agregar_marcador').addEventListener('click',
                         function(){
					 agregarMarcador();
				 });
 
				 document.getElementById('agregar_marcador_person').addEventListener
                                 ('click', function(){
					 agregarMarcadorPerson();
		 		});
			 }

• Casi hemos terminado de explicarte el proceso para utilizar vectores en Google Maps, falta poco. A continuación, en este paso, antes de elaborar las funciones que van a fijar los marcadores debes tomar en cuenta lo siguiente.
• Primero, debes trabajar en las coordenadas para que nos proporcionen valores de forma aleatoria en ese aspecto.
• A su vez, dichas coordenadas deben ser interpretadas por el API de Javascript de Google Maps. Este proceso lo llevaremos a cabo con operaciones sobre las variables globales de ciertas coordenadas, para ello ingresa la siguiente función:

function crearLaLgRandom() {
				 var deltaLat = maxLat - minLat;
				 var deltaLng = maxLng - minLng;
				 var rndNumLat = Math.random();
				 var newLat = minLat + rndNumLat * deltaLat;
				 var rndNumLng = Math.random();
				 var newLng = minLng + rndNumLng * deltaLng;
				 return new google.maps.LatLng(newLat, newLng);
			 }

• Seguidamente, puedes proceder a elaborar tus propias funciones para anclar los marcadores al respectivo mapa. Para hacer esto debes usar el método Marker para poder generar un marcador ordinario y con la función nombrada anteriormente puedes generar una coordenada random donde será desplegado el mapa.

function agregarMarcador() {
				 var coordinate = crearLaLgRandom();
				 var marker = new google.maps.Marker({
					 position: coordinate,
					 map: mapa,
					 title: 'Marcador Aleatorio - ' + markerId
				 });
				 markerId++;
			 }

• Luego, cuando tienes todos los iconos deseados, debes elaborar la función. Para llevar a cabo esto, tienes que crear un array con los nombres de los iconos y procede a recorrerlo de forma aleatoria, para ello debes añadirle un parámetro al método Marker.

function agregarMarcadorPerson() {
				 var markerIcons = ['comics', 'videogames', 'computers', 'hotfood',
                                 'bike_rising'];
				 var rndMarkerId = Math.floor(Math.random() * markerIcons.length);
				 var coordinate = crearLaLgRandom();
				 var marker = new google.maps.Marker({
					 position: coordinate,
					 map: mapa,
					 icon: 'img/' + markerIcons[rndMarkerId] + '.png',
					 title: 'Marcador Aleatorio - ' + markerId
				 });
				 markerId++;
			 }

• Para finalizar el proceso de cómo utilizar vectores en Google Maps, debemos hacer lo siguiente. Simplemente debemos añadir el evento para iniciar el mapa y luego procedemos a crear dos vínculos antes de nuestro div con los ID que hemos definido para los eventos que llamarán las siguientes funciones

google.maps.event.addDomListener(window, 'load', inicializarMapa);

google.maps.event.addDomListener(window, 'load', inicializarMapa);
	 </script>
</head>
<body>
	 <b>Agregar marcadores</b><br/>
	 <br/>
	 <a id="agregar_marcador" href="#">Agregar Marcador</a>
	 |
	 <a id="agregar_marcador_person" href="#">Agregar Marcador Personalizado</a>
	 <div id="mapaDiv"></div>
</body>
</html>

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.

Finalmente, con la información que te hemos proporcionado, ya has aprendido la manera más sencilla de utilizar vectores en Google Maps.

Antes de finalizar seguramente te quedó la duda de como puedes poner coordenadas en Google Maps de una manera sencilla, en realidad es algo que no es tan complicado así que puedes guiarte por medio de un tutorial bastante especifico.