¿Cómo Utilizar Vectores en Google Maps? Fácil y Rápido

¿Quieres Utilizar Vectores en Google Maps? En el siguiente artículo, te enseñaremos las formas que existen para utilizar vectores relevantes del API de JavaScript de Google Maps. De la misma manera, veremos todo el proceso a realizar a través de tu ordenador, por ello te recomendamos seguir leyendo para saber cómo utilizar vectores en Google Maps.

Generalmente, los mapas generados a partir de la API de JavaScript de Google Maps no siempre son estáticos, es decir que necesitaremos extender el alcance de los mapas para poder tener información extra. Esta información será incluida gracias a los vectores, también denominados como overlays, que estarán compuestos por puntos.

¿Cómo Añadir Marcadores al Mapa?

Los mapas que se crean a partir del API, se usan como norma general para mostrar la ubicación exacta de cualquier lugar en un portal web. A esto lo llamamos punto de interés, con el cual podemos representar con un determinado vector.

Este es conocido como “marcador” en el lenguaje del API de Javascript de Google Maps. Para saber cómo añadir estos marcadores a tu mapa personalizado, te lo indicaremos a continuación.

Pasos para Añadir un Marcador Personalizado en el Mapa

1. Incluir el API para visualizar nuestro mapa personalizado.

En este paso es fundamental usar la credencial de desarrollador de google para que el siguiente ejemplo pueda funcionar:

<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>

2. Definir las variables globales

una de ellas será “mapa” y también una cantidad de variables que serán usadas para elaborar marcadores aleatoriamente en las coordenadas de una zona cualquiera, por ejemplo Madrid.  Para ello utiliza la siguiente función:

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

3. 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 de la zona.

4. Obtener la ID del div por el DOM

Luego iniciamos el mapa y definimos una función para controlar los eventos que ocurran al ubicar los marcadores en nuestro mapa con el siguiente código:

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();
			 }

5. Elaborar la función “eventosMarcador”

con 2 eventos en su definición atados a través de un clic según el ID que se presione desde 2 vínculos distintos. A su vez dichos enlaces deben llamar a 2 funciones adicionales que fijarán los siguientes marcadores:

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

6. Terminando con el proceso para utilizar vectores en Google Maps, antes de elaborar las funciones que van a fijar los marcadores debemos trabajar en las coordenadas para que nos proporcionen valores aleatorios. A su vez, dichas coordenadas deben ser interpretadas por el API de Javascript de Google Maps. Esto lo haremos con operaciones sobre las variables globales de ciertas coordenadas con 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);
			 }

7. Para continuar, puedes elaborar tus propias funciones para anclar los marcadores al mapa mediante el método Marker para poder generar un marcador ordinario. Con la función nombrada anteriormente puedes generar una coordenada aleatoria 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++;
			 }

8. Luego, cuando tienes todos los iconos, debes elaborar la función. Para ello, creamos un array con los nombres de los iconos y lo recorremos de forma aleatoria, añadiendo 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++;
			 }

9. Para finalizar el proceso de cómo utilizar vectores en Google Maps, debemos añadir el evento para iniciar el mapa y luego crear 2 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>

Finalmente, con la información que te hemos proporcionado, esperamos que hayas aprendido fácilmente a utilizar vectores en Google Maps.