Hola a todos, espero se encuentren muy bien, ahora les explicaré como utilizar la API de Google Maps para usar la geolocalización. Haremos un pequeño ejemplo con HTML, CSS y JS. Para obtener más información de la API de Google Maps visita la web de oficial
Primero es de saber que utilizar la API de Google Maps hay que integrarla en nuestro documento HTML, lo hacemos llamando la librería desde el CDN de Google así
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
En el ejemplo utilizaré el Framework jQuery, pueden utilizar un CDN o un archivo local. El HTML de este ejemplo es muy simple, solo pondré el contenido del body
<div class="map" id="mapaUbicar"></div> <input type="text" value="" name="ubicacion" id="ubicacion">
Tenemos un div vacío y un input, he puesto el input a modo de mostrar como capturar las coordenadas y asignarselas al input, es algo bastante común en los desarrollo web de weapps. Bien, ahora les pondré un pequeño CSS para que se vea mejor el mapa y el contenido de la input.
.map {
width:100%;
height:450px;
}
#ubicacion {
width:99%;
padding:5px;
margin:5px 0;
}
Lo que hacemos es ponerle el ancho completo y una altura al div que contendrá el mapa, a la input le ponemos un ancho, un padding y un margin, es muy sencillo el CSS.
Ahora vamos a la parte gruesa, aun que es muy sencillo también, les explicaré por partes
jQuery(document).ready(function(e) {
//Inicializamos la detección de nuestra posición por medio de esta función
obtener_posicion_actual();
});
He creado una función para inicializar la detección de nuestra posición actual.
obtener_posicion_actual = function(options) {
var defaults = {
maximumAge: 500000,
enableHighAccuracy: true,
timeout: 600000
}
jQuery.extend(defaults, options);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(exito, fallo, defaults);
}
}
Esta función recibe un objeto Javascript como parámetro, también puede ir vacío, lleva 4 parámetros:
- maximumAge: Es un valor
longpositivo que indica la edad máxima en milisegundos de una posible posición “cacheada” que es aceptable retornar. Por defecto en esta función he puesto que sea 50,000 milisegundos. - enableHighAccuracy: Es un Boolean que indica que la aplicación quiere recibir los mejores resultados posibles. Si es true y si el dispositivo es capaz de proporcionar una posición más precisa, así lo hará. Por defecto es true.
- timeout: Es un valor long positivo que representa el máximo período de tiempo (en millisegundos) que se le permite tomar al dispositivo para retornar a una posición. Por defecto en esta función he puesto que sea 60,000 milisegundos.
Luego preguntamos si el navegador soporta la geolocalización, si es así utilizamos: navigator.geolocation.getCurrentPosition(exito, fallo, defaults); donde exito y fallo son dos funciones, una para éxito si ha logrado obtener la posición actual y la otra por si hay un fallo, se falla puede devolver 1 de 4 códigos para decirnos que es lo que pasó, pueden ser: 0, 1, 2 o 3. Les coloco el código de ambas funciones y verán que es cada código de error. El último parametro es el objeto que le pasamos a la función defaults.
function exito(pos) {
var coors = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
mapa = nuevo_mapa({
id:'mapaUbicar',
zoom: 13,
center: coors
});
agregar_marcador({
lat:pos.coords.latitude,
lon:pos.coords.longitude
},mapa);
}
function fallo(error) {
if (error.code == 0) {
alert("Oops! No se puede obtener la posición actual.");
}
if (error.code == 1) {
alert("Oops! Algo ha salido mal.");
}
if (error.code == 2) {
alert("Oops! No has aceptado compartir tu posición.");
}
if (error.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
Como vemos en código anterior, la función exito recibe como parámetro una posición, la cuál es tomada en la función que la llama, en base a la posición se obtiene en coors una latitud y longitud para ser usada en la API de Google Maps. Luego llamamos una función para crear un mapa, esta recibe un objeto:
- id: Id del elemento HTML que contendrá el mapa, en nuestro caso la div vacía.
- zoom: Zoom que queremos que tenga nuestro mapa al iniciarse
- center: las coordenadas del centro que queremos ubicar, le pasamos las de nuestra posición actual.
Luego agregamos un marcador, así mostramos con un marker la posición donde nos encontramos, le pasamos la latitud y longitud para que se dibuje en el mapa.
La función fallo recibe como parámetro un código de error:
- 0: No se puede obtener la posición actual.
- 1: Hay algo que ha salido mal.
- 2: No aceptaste darle permisos al navegador para que detecte tu posición actual.
- 3: Se superó el tiempo de espera y no hubo respuesta.
Veamos la función para crear un mapa:
nuevo_mapa = function(options){
var defaults = {
id: '',
zoom: 5,
center: new google.maps.LatLng(10.386748, -75.504615),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
jQuery.extend(defaults, options);
mapa = new google.maps.Map(document.getElementById(defaults.id), defaults);
return mapa;
}
A esta función le pasamos como parámetro el objeto antes mencionado para la creación del mapa. finalmente usamos mapa = new google.maps.Map(document.getElementById(defaults.id), defaults); donde mapa es una instancia de un objeto tipo mapa de Google Maps y retornamos la variable creada para que se pueda utilizar fuera.
Ahora veamos la función que crea el marcador:
agregar_marcador = function(location,mapa) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat,location.lon),
map: mapa,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
pos = marker.getPosition();
input = '#ubicacion';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
latLng: pos
}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
jQuery(input).val(results[0].geometry.bounds.R.R+','+results[0].geometry.bounds.j.j);
} else {
alert('No se pudo determinar la posición: '+status);
}
});
});
}
Esta función quizá sea la más compleja, no por la creación del marcador, sino por el listener que escucha cuando movemos el marcador. Lo primero que vemos es una variable marker, con ella agregamos el marcador al mapa, utiliza la posición que se ha capturado cuando ha obtenido nuestra posición actual, se le pasa como objeto location en esta función, luego se le pasa la referencia al mapa que se está utilizando y finalmente el parámetro draggable : true para que el marker se pueda arrastrar dentro del mapa.
Luego vemos un addListener que es un metodo de un objeto de Google Maps, se le pasa como parámetro el marcador, el evento a escuchar ‘dragend’ (Finalización del arrastrado por así traducirlo) y un callback, creamos una función anónima, con pos = marker.getPosition(); obtenemos la posición donde soltamos el marcador luego de arrastrarlo, luego creamos un objeto geocoder, le pasamos latLng, o sea, la posición donde se soltó el marker y una función haciendo de callback, esta función se le pasa un result y un status.
Verificamos que el staus sea el adecuado, en este caso buscamos un OK, entonces le asignamos la posición del marker al input, al result en la posicón 0 buscamos el objeto geometry, luego el objeto bounds, luego el bojeto R y finalmente el objeto R y ese valor almacenado en ese objeto le pasamos como latitud, para la longitud es de igualmanera, pero en lugar de R usamos j. Si la respuesta del status es diferente a OK mostraremos un alert indicando que no se pudo obtener la posición y nos agrega el status obtenido.
El código completo de Javascript sería así:
jQuery(document).ready(function(e) {
obtener_posicion_actual();
});
agregar_marcador = function(location,mapa) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat,location.lon),
map: mapa,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
pos = marker.getPosition();
input = '#ubicacion';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
latLng: pos
}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
jQuery(input).val(results[0].geometry.bounds.R.R+','+results[0].geometry.bounds.j.j);
} else {
alert('No se pudo determinar la posición: '+status);
}
});
});
}
nuevo_mapa = function(options){
var defaults = {
id: '',
zoom: 5,
center: new google.maps.LatLng(10.386748, -75.504615),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
jQuery.extend(defaults, options);
mapa = new google.maps.Map(document.getElementById(defaults.id), defaults);
return mapa;
}
function exito(pos) {
var coors = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
mapa = nuevo_mapa({
id:'mapaUbicar',
zoom: 13,
center: coors
});
agregar_marcador({
lat:pos.coords.latitude,
lon:pos.coords.longitude
},mapa);
}
function fallo(error) {
if (error.code == 0) {
alert("Oops! No se puede obtener la posición actual.");
}
if (error.code == 1) {
alert("Oops! Algo ha salido mal.");
}
if (error.code == 2) {
alert("Oops! No has aceptado compartir tu posición.");
}
if (error.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
obtener_posicion_actual = function(options) {
var defaults = {
maximumAge: 500000,
enableHighAccuracy: true,
timeout: 600000,
puntos : false
}
jQuery.extend(defaults, options);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(exito, fallo, defaults);
}
}
Esperamos que esto te sea de ayuda para tus desarrollos en Javascript y con la API de Google Maps.
Algo muy importante a destacar es que para poder usar la geolocalización de Google Maps debes ejecutar el código en un servidor, puede ser un servidor en internet o un servidor local (XAMMP, MAMP, WAMP, LAMP, Bitnami, etc)