Saltar al contenido

¿Cómo Utilizar Vectores en Google Maps?

10 junio, 2019

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.

¿Cómo Añadir Marcadores al Mapa?

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.

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>

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

¿Nos das 5 estrellas? ?