En esta entrada crearemos un mapa de Google Maps utilizando la API versión 3.14 y ubicaremos un marcador en la posición actual del usuario utilizando la geolocalización del dispositivo.
Para comenzar crearemos un sitio web en VS2010 o VS2012 y agregaremos tres carpetas: css, img y js. En la carpeta js colocaremos jQuery, creamos un archivo map.js y también lo agregamos a la carpeta js. Creamos un archivo de hoja de estilos llamado site.css y lo colocamos en nuestra carpeta css.
Para el icono de la posición actual del usuario podemos utilizar uno de los que aparecen en el sitio http://mapicons.nicolasmollet.com, tienen un diseño atractivo y se puede personalizar el color de fondo. Una vez elegido el icono lo guardamos en nuestra carpeta img con el nombre current_location.png
Una vez realizados estos pasos nuestro Explorador de Soluciones debería verse de la siguiente forma:
Vamos a incorporar todos los elementos junto con la referencia a la API de Google Maps en nuestra página HTML con el siguiente código:
<head>
<title>Ubicación actual</title>
<script src="http://maps.google.com/maps/api/js?v=3.14&sensor=false&language=es-mx" type="text/javascript"></script>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="js/map.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Vamos a abrir nuestra hoja de estilos y vamos a colocar algunos estilos para que el mapa ocupe la pantalla completa del dispositivo:
html, body { margin: 0px; height: 100%; }
#map { width: 100%; height: 100%; }
Ahora vamos a generar el código que nos permitirá la creación del mapa, la localización de la ubicación del usuario y la colocación del respectivo marcador en el mapa.
Abriremos nuestro archivo map.js y comenzaremos con la obtención de la ubicación actual del usuario:
///<reference path="jquery-1.10.2.min.js" />
var blogger = blogger || {};
blogger.start = function () {
if (window.clientInformation) {
window.clientInformation.geolocation.getCurrentPosition(
function (e) {
var latlng = new google.maps.LatLng(e.coords.latitude, e.coords.longitude);
initialize(latlng);
},
function (e) {
initialize(null);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
else {
window.navigator.geolocation.getCurrentPosition(
function (e) {
var latlng = new google.maps.LatLng(e.coords.latitude, e.coords.longitude);
initialize(latlng);
},
function (e) {
initialize(null);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
function initialize(e) {
}
}
$(document).ready(function () {
blogger.start();
});
En la primera línea de código estamos agregando una referencia a la librería jQuery para que el editor tome la definición de las funciones de esa librería y nos facilite la codificación.
Estamos creando un espacio de nombres llamado blogger para que el manejo de nuestras variables y funciones no vayan a causar conflicto con otras que estén depositadas en el espacio global. Una vez que haya finalizado la carga de la página estamos mandando a llamar a la función blogger.start que será la encargada de todo el trabajo.
Estamos validando que exista la propiedad window.clientInformation para poder diferenciar entre el navegador Safari y los demás, veamos que cuando no existe esa propiedad la obtención de la localización actual del usuario se hace a través del objeto window.navigator
La función getCurrentPosition recibe tres argumentos, el primero marca la función que se mandará a llamar cuando se haya podido obtener la posición del usuario, el segundo es la función que se ejecutará cuando no se haya podido obtener la localización del usuario y el tercero es un conjunto de opciones que nos permiten establecer si queremos la mayor exactitud posible, el tiempo en milisegundos que esperaremos para obtener la posición y el tiempo que esta posición estará guardada en caché.
Veamos que cuando la localización haya sido exitosa, se estará construyendo un objeto google.maps.LatLng, este objeto nos permite establecer ubicaciones en la notación (Latitud, Longitud) en el mapa.
Ahora vamos a codificar nuestra función initialize que creará el mapa y el marcador con la ubicación actual del usuario.
Comenzaremos con la creación del mapa centrándolo en la ubicación del usuario con un zoom de 14:
function initialize(e) {
var mapOptions = {
center: e,
zoom: 14
};
blogger.map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
Veamos que el constructor del objeto google.maps.Map nos pide el nodo donde se alojará el mapa (en nuestro caso un div cuyo id es "map") y también un literal object que tenga la configuración del mapa. Vamos a abrir nuestro archivo index.htm con el navegador y veamos que nos pedirá la autorización para enviar nuestra localización a la página web, esto es completamente normal.
Ahora vamos a crear un marcador que utilice la imagen que tenemos en la carpeta img y lo colocaremos en la posición actual del usuario:
function initialize(e) {
var mapOptions = {
center: e,
zoom: 14
};
blogger.map = new google.maps.Map(document.getElementById('map'), mapOptions);
var markerOptions = {
position: e,
map: blogger.map,
title: 'Usted se encuentra aquí',
icon: 'img/current_location.png'
}
var currentPositionMarker = new google.maps.Marker(markerOptions);
}
El constructor del objeto google.maps.Marker nos pide un objeto literal que traiga la configuración del marcador, en este caso nos pide la posición del marcador (google.maps.LagLnt), el mapa donded estará localizado el marcador (blogger.map), el texto que mostrará como tooltip del marcador y la url del icono que queremos utilizar. En caso de que no utilicemos el atributo "icon", entonces se colocará el marcador que tiene por defecto Google Maps.
Si visitamos de nueva cuenta nuestro sitio, veremos que colocará el marcador en nuestra posición actual.
Espero te haya resultado de utilidad esta entrada, actualmente muchas aplicaciones están requiriendo del uso de mapas y Google Maps es una opción muy buena dada la facilidad que tiene su API para ser utilizada.
¡Nos vemos la siguiente!
No hay comentarios.:
Publicar un comentario