8:37 0 0
Representar puntos con Google Maps en tu web

Representar puntos con Google Maps en tu web

  Sergi |  junio 82017

Marcadores con Google Maps

Para poder trabajar con las APIS de Google Maps es necesario conseguir una API Key y hacer referencia a su api. Consigue tu API KEY aqui . La API con la que vamos a trabajar es Google Maps JavaScript API y una vez obtenida nuestra KEY, insertaremos el el HEAD del documento la referencia a dicha API con nuestra KEY, normalmente este codigo nos lo proporciona Google cuando nos registramos para utilizar la libreria.

< script type="text/javascript" src="http://maps.google.com/maps/api/js?key=[LA KEY OBTENIDA]&sensor=[TRUE O FALSE]">< /script>

La variable de SENSOR se establece si deseamos que identifique la posicion del usuario o no.

Como trabajar con la API

Para mostrar un punto en el mapa, debemos de utilizar la funcion google.map.Marker(). Le tenemos que enviar dos variables: El Mapa, Longitud y Latitud.  Por lo que necesitamos siempre conocer las coordenadas exactas de la direccion que queremos mostrar.

Para obtener las coordenadas podemos llamar a la funcion google.maps.Geocoder() y le tenemos que enviar la direccion del lugar que queremos mostrar. Y aqui se nos complica un poco la cosa, ya que cada pais tiene su "nomenglatura" para escribir las direcciones, pero bueno, es facil, con escribir la direccion tal cual le enviarias una carta, suele funcionar, si no es correcta, mira como se escriben las direcciones en el pais que corresponda e intenta escribirla con esa nomenglatura.

Mi solucion al problema

Bueno como este blog siempre se intenta hacer para principiantes, y estos parrafos me han quedado un poco complicados de entender, vamos a ponernos manos a la obra y voy explicando cada funcion y que es lo que hace. He intentado que sea lo mas generico y facil posible, luego dependera con que otro lenguaje de programacion estes haciendo la web para enviar los datos a estas funciones en JAVASCRIPT.

Buscar las coordenadas de una direccion

Primer problema que se nos plantea. Como obtener las coordenas de Latitud y Longitud de la direccion que queremos representar. Para ello podemos utilizar este pequeño codigo.

var direcciones = Array(0);
/**
* Obtener Latitud y Longitud de una direccion
* @param {string} address Direccion a recoger las coordenadas
* @param {string} description Descripcion que quieres que aparezca en el marcador
*/
function codeAddress(address, description) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var coordenadas = results[0].geometry.location;
var str = coordenadas.toString();
str = str.replace("(", "");
str = str.replace(")", "");
direcciones.push(description + "~" + str);
return str;
} else {
alert("Error");
return '';
}
});
}

Primero. La variable array global direcciones la vamos a utilizar luego en otra funcion, por eso la he definido como global, pero podrias suprimirla dependiendo de tu codigo. Esta funcion recibe dos parametros en modo string (texto): La direccion y la descripcion de la misma. 

La primera esta clara, y ya comente como debes de escribirla. La segunda es la que va a representar el texto que aparece cuando pulsamos sobre el marcador. Admite codigo HTML por lo que se puede hacer casi lo que se quiera.

Si lees la documentacion de la API veras que se pueden agregar imagenes y cambiar el icono y mil cosas mas, pero no lo camos a explicar aqui, con este pequeño texto en HTML ya puedes hacer cosas chulas.

Luego se declara el obeto de la funcion google.maps.Geocoder() y lo ejecutamos para obtener las coordenadas.

Por ultimo agregamos al array direcciones la descripcion y las coordenadas. Yo he tulizado un separador ~ y almaceno solo una linea de texto, pero puede hacer que almacene otro array, o lo que quieras.

Para poder cargar correctamente el array direcciones, como supondras, hay que hacerlo tantas veces como puntos queramos representar. Para ello he creado esta otra funcion:

/**
* Agregar varios marcadores a un mapa
* @param {string} id Id del div donde se tiene que dibujar el mapa
* @param {number} z nivel de zoom desde 1 hasta 22
* @param {Array} p Array con Direccion, Descripcion
*/
function puntos(id, z, p) {
for (var i = 0; i < p.length; i++) {
codeAddress(p[i][0], p[i][1]);
}
setTimeout(MuestraPuntos, 3000, id, z);
}

Como vereis la ultima linea es la que va a llamar a la proxima funcion MuestraPuntos y lo hacemos con un retardo de 3 segundos. Esto es porque la funciones google.maps.Geocoder() tarda un poco en obtener los datos y agregarlos al array direcciones. El tiempo de retardo dependera del numero de puntos que quieras representar, pero es muy rapido realmente, yo creo que con 3 segundos por cada 10 puntos vas mas que sobrado, pero no lo he puesto muy a prueba. Eso se lo dejo a la persona que este leyendo estas linas, trabaja un poco jejejeje.

Mostrando los puntos en el mapa

Una vez ejecutada la funcion puntos se ejecuta la siguiente funcion que paso a mostrar y comentar luego:

/**
* Muestra puntos en google maps
* @param {string} id nombre del div donde se mostrara el mapa
* @param {number} z nivel de zoom a utilizar desde 1 hasta 22
*/
function MuestraPuntos(id, z) {
var marcadores = [];
var contenido;
var coordenadas;
var marca = [];
for (var i = 0; i < direcciones.length; i++) {
contenido = direcciones[i].split('~');
coordenadas = contenido[1].split(',');
marca.push(contenido[0]);
marca.push(coordenadas[0]);
marca.push(coordenadas[1]);
marcadores.push(marca);
marca = [];
}

var map = new google.maps.Map(document.getElementById(id), {
zoom: z,
center: new google.maps.LatLng(marcadores[0][1], marcadores[0][2]),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < marcadores.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(marcadores[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

Esta funcion comienta a recorrer el array direcciones y componiendo un nuevo array, marcadores que es el que va a contener las marcas que le enviaremos a la API para que muestr el mapa.

Debemos crear el objeto map llamando a la funciones google.maps.Map() a esta funciones le tenemos que enviar el elemento de la pagina, DIV, que va a contener el mapa para visualizarlo, por eso siempre en todas las funciones estamos enviando una variable llamada ID.

Este mapa se va a centrar, en mi funcion, siempre en el primero de los marcadores enviados, pero puedes cambiarlo como desees, recuerda que le tienes que pasar Latitud y Longitud.

Luego tenemos la variable Z que us entero comprendido entre 0 y 22, que va a identificar el nivel de zoom de la ventana del mapa. En la documentacion de la API tienes explicados los 4 principales niveles de zoom.


Una Direccion Exacta, Salamanca y Zamora
Aclaraciones

Me olvide explicar un poco la funcion puntos. Esta recibe como parametros el ID del DIV que contendra el mapa, el nivel de zoom, y un array que es el que contendra las direcciones y descripciones de los marcadores. Aqui les dejo el codigo de ejemplo en HTML utilizado para representar los puntos que se muestran en la imagen.

< !DOCTYPE html>
< html>
< head>
< title>
< meta charset="utf-8" />
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< meta name="viewport" content="width=device-width, initial-scale=1" />
< !-- JQUERY SCRIPTS -->
< script src="https://code.jquery.com/jquery.min.js">
< script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBn5Ebv7vGdfXpyaD1A-P-pEVAIj81Zu6Y&sensor=false">
< /head>
< body>
< div class="col-lg-12 col-md-12 col-sm-12" style="background-image: url('../img/specials.png')">
< label for="origen">Origen
< input type="text" name="origen" id="origen" placeholder="calle, ciudad, estado..." />
< br />
< label for="destino">Destino
< input type="text" name="destino" id="destino" placeholder="calle, ciudad, estado..." />
< br />
< input type="button" id="buscar" value="Buscar ruta" onclick="initMap(getElementValue('origen'), getElementValue('destino'), 'map_canvas')" />
< /div>
< br />
< div class="col-lg-12 col-md-12 col-sm-12">
< div id="map_canvas" style="float:left; width:70%; height:500px">< /div>
< /div>
< div class="clearfix">< /div>
< div class="col-lg-12 col-md-12 col-sm-12">
< h1>puntos< /h1>
< div class="col-lg-12 col-md-12 col-sm-12">
< div id="puntos" style="float:left; width:70%; height:500px">< /div>
< /div>
< /div>


< script src="../js/maps.js">< /script>

< script type="text/javascript">
$(document).ready(function () {
var points = [['Una direccion concreta en Canarias', '

Mi

Casa'],
['Salamanca', 'Salamanca'],
['Zamora', 'Zamora']];

puntos('puntos', 7, points); //llamar a puntos que es la funcion pricipal que lanzara todas las demas
});
< /script>
< /body>
< /html>

Happy Codding

#javascript #APIs #HTML #web

0 Comentarios

 
 
 

Archivo