En un post anterior, vimos cómo hacer un Geocode Simple, donde obteníamos las coordenadas a partir de una dirección dada, es decir, podríamos poner cualquier combinación de calles, colonias, ciudad, etc. y obtener las coordenadas de esa dirección para colocarlas en un mapa. En este caso es al contrario, buscar direcciones (de acuerdo a la base de datos de Google) a partir de coordenadas.

Lo que haremos se resume en: escribir coordenadas (latitud, Longitud), verificar si existe, si existe, colocar un marcador, centrar y dar zoom en el mapa en la región de la dirección obtenida, si no existe la dirección arrojar un error diciendo que no existe.

Al igual que el ejemplo anterior, es necesario crear un objeto Geocoder, que nos permitirá hacer la interpretación de lo que intentemos buscar.

var geocoder = new google.maps.Geocoder();

El objeto que se obtiene de respuesta es un JSON, donde lo manejaríamos como regularmente se hace en javascript, el resultado es algo como esto:

{
  "status": "OK",
  "results": [ {
    "types": [ "street_address" ],
    "formatted_address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
    "address_components": [ {
      "long_name": "1600",
      "short_name": "1600",
      "types": [ "street_number" ]
    }, {
      "long_name": "Amphitheatre Pkwy",
      "short_name": "Amphitheatre Pkwy",
      "types": [ "route" ]
    }, {
      "long_name": "Mountain View",
      "short_name": "Mountain View",
      "types": [ "locality", "political" ]
    }, {
      "long_name": "California",
      "short_name": "CA",
      "types": [ "administrative_area_level_1", "political" ]
    }, {
      "long_name": "United States",
      "short_name": "US",
      "types": [ "country", "political" ]
    }, {
      "long_name": "94043",
      "short_name": "94043",
      "types": [ "postal_code" ]
    } ],
    "geometry": {
      "location": {
        "lat": 37.4219720,
        "lng": -122.0841430
      },
      "location_type": "ROOFTOP",
      "viewport": {
        "southwest": {
          "lat": 37.4188244,
          "lng": -122.0872906
        },
        "northeast": {
          "lat": 37.4251196,
          "lng": -122.0809954
        }
      }
    }
  } ]
}

Lo único que nos faltaría es el código para validar, interpretar y dibujar. Para esto, hay 3 cosas importantes que debemos tomar en cuenta del JSON que tenemos de respuesta:

• status: contiene la respuesta del estado de la petición, si fue satisfactoria o si hubo algún error y que tipo de error.
• geometry.location: la ubicación de la dirección solicitada.
• geometry.viewport: los límites recomendados para ajustar el zoom del mapa, haciendo un cuadrante con las esquinas Noreste (superior derecha) y Suroeste (inferior izquierda).

Con esto en presente, la función siguiente nos mostrará solamente el primer resultado obtenido, quedando así :

function codeLatLng() {
   var input = $('#latlng').val();
   var latlngStr = input.split(',', 2);
   var lat = parseFloat(latlngStr[0]);
   var lng = parseFloat(latlngStr[1]);
   var latlng = new google.maps.LatLng(lat, lng);
   geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
         if (results[0]) {
            map.fitBounds(results[0].geometry.viewport);
            marker.setMap(map);
            marker.setPosition(latlng);
            $('#address').text(results[0].formatted_address);
            infowindow.setContent(results[0].formatted_address);
            infowindow.open(map, marker);
            google.maps.event.addListener(marker, 'click', function(){
               infowindow.setContent(results[0].formatted_address);
               infowindow.open(map, marker);
            });
         } else {
            alert('No results found');
         }
      } else {
         alert('Geocoder failed due to: ' + status);
      }
   });
}

Los primeros 4 renglones de la función realizan la validación y separación de latitud y longitud, para poder formar el objeto latLng, y listo con esto tenemos terminado nuestro ejercicio, puedes verificarlo en funcionamiento en la página de demos:

El código completo quedaría así:

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker();

function closeInfoWindow() {
      	infowindow.close();
   }

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(20.68009, -101.35403);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  google.maps.event.addListener(map, 'click', function(){
        	closeInfoWindow();
     	  });
}

function codeLatLng() {
  var input = $('#latlng').val();
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
		map.fitBounds(results[0].geometry.viewport);
                marker.setMap(map);
                marker.setPosition(latlng);
		$('#address').text(results[0].formatted_address);
		infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
		google.maps.event.addListener(marker, 'click', function(){
            infowindow.setContent(results[0].formatted_address);
	        infowindow.open(map, marker);
        });
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}

$(document).ready(function(){
   initialize();
});

Y en el Body solamente esto:

<div>
   <input id="latlng" type="textbox" value="20.68009, -101.35403">
</div>
<div>
   <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
</div>
<table class="width2">
   <tr><td class="unitx1"><strong>Dirección:</strong></td><td><div id="address"></div></td></tr>
</table>
<div id="map_canvas" style="width: 990px; height: 500px"></div>

Espero les sirva y cualquier cosa, ya saben cómo contactarme…

Enjoy this Life!

En esta ocasión veremos un ejemplo buscado por muchos, y que puede llegar a tener gran utilidad dependiendo de nuestra aplicación, estamos hablando de trazar rutas… dije ¿rutas?, si, rutas, direcciones, un pequeño GPS en web.

Lo que haremos es bastante sencillo de entender y lo pondremos de la manera más básica, esto para darte la amplitud a que lo mejores y le pongas la cara que desees.

El proceso es entendido por todos, es proporcionar 2 puntos, un origen y un destino, a partir de esto, que nos proporcione una ruta para ir de un lado a otro. Sin más preámbulo manos a la obra.

Lo primero (siempre usaremos los scripts de jQuery y GMaps) que haremos será crear el html sobre el cuál vamos a trabajar, para esto solamente requerimos 2 cajas de texto para escribir el origen y el destino, un botón para ejecutar el proceso, 2 combobox donde uno será para elegir el modo de viaje (auto, bicicleta, caminando) y el otro para elegir el sistema de medición (Métrico -mts, Km-, Imperial -ft, Mi-), por último 2 divs, uno para el espacio del mapa y otro para el panel de direcciones.

<div>
	<label for="origen">Origen</label>
	<input type="text" name="origen" id="origen" placeholder="calle, ciudad, estado..." />
	<br />
	<label for="destino">Destino</label>
	<input type="text" name="destino" id="destino" placeholder="calle, ciudad, estado..." />
	<br />
	<input type="button" id="buscar" value="Buscar ruta"  />
</div>
<br />
<h3>Opciones</h3>
<div id="rutaOps">
	<select id="modo_viaje" class="opciones_ruta">
		<option value="DRIVING" selected="selected">Auto</option>
      	<option value="BICYCLING">Bicicleta</option>
      	<option value="WALKING">Caminando</option>
  	</select>
  	<select id="tipo_sistema" class="opciones_ruta">
      	<option value="METRIC" selected="selected">Métrico</option>
      	<option value="IMPERIAL">Imperial</option>
  	</select>
</div>
<br />
<div>
	<div id="map_canvas" style="float:left; width:70%; height:500px"></div>
	<div id="panel_ruta" style="float:right; overflow: auto; width:30%; height: 500px"></div>
</div>

Una vez que tenemos el HTML nos enfocaremos en el la API y JS completamente, declaramos 2 objetos globales, uno es DirectionsRenderer y otro es DirectionsService. El primero nos dará las herramientas necesarias para que visualicemos en el navegador toda la información obtenida, el segundo es el servicio que buscará en las bases de datos de Google Maps tanto los puntos como la(s) rutas existentes.

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

Una vez hecho esto, escribimos el código para ya tener inicializado y dibujado el mapa en nuestra página, creamos una función con el nombre que nosotros queramos, dentro de ella, vamos a colocar lo siguiente:

var request = {
 origin: $('#origen').val(),
 destination: $('#destino').val(),
 travelMode: google.maps.DirectionsTravelMode[$('#modo_viaje').val()],
 unitSystem: google.maps.DirectionsUnitSystem[$('#tipo_sistema').val()],
 provideRouteAlternatives: true
 };

Línea por línea:

1. Declaramos una variable con las opciones con las que se va a solicitar la información al objeto DirectionsServices, lo siguiente son parámetros para hacer la búsqueda de acuerdo a los datos introducidos.
2. A origin se le asigna el valor de  la caja de texto origen estableciendo el punto de partida de la ruta.
3. A destination se le asigna el valor de la caja de texto destino con el que se especifica el punto final de la ruta.
4. En la opción travelMode se asigna la opción elegida para el modo de viaje (modo_viaje), por esta razón en el valor de cada opción se definió de acuerdo al valor asignado en la API.
5. unitSystem se refiere al tipo de unidades que se utilizarán para mostrar distancias, obteniendo el valor del tipo_sistema.
6. Con la opción provideRouteAlternatives establecemos en verdadero o falso (por default false), para indicar que puede ofrecernos más resultados para las rutas (rutas alternativas).

Una vez declarada la variable con el arreglo de los parámetros, con unas cuántas líneas vamos a hacer la solicitud y plasmar el resultado:

directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
		directionsDisplay.setMap(map);
		directionsDisplay.setPanel($("#panel_ruta").get(0));
		directionsDisplay.setDirections(response);
	} else {
	        alert("No existen rutas entre ambos puntos");
	}
});

Recordemos que al inicio declaramos 2 objetos, teniendo en cuenta su función, les explico línea a línea:

1. directionsService.route hace la solicitud a la API con los datos que previamente establecimos (request), creamos una una función interna, que recibe los parámetros de respuesta (response) que es donde vendrían contenidos los datos y un estatus (status) que indica si fue exitosa la solicitud.
2. Si el estatus es OK procedemos, si no, mandamos un mensaje de error diciendo que no se pudo encontrar ruta entre ambos puntos. Existe una serie de estatus distintos, sin embargo y para efectos prácticos solamente usamos aquí el OK (para ver más tipos de status, hay que ir directamente a la documentación de la API).
3. directionsDisplay.setMap(map) establece el mapa sobre el cuál será trazada la ruta, la variable map debe ser un objeto tipo Mapa, además de global.
4. directionsDisplay.setPanel($(“#panel_ruta”).get(0)) indica dónde van a ser escritas las indicaciones de la ruta, aquí es necesario indicar un div disponible (panel_ruta).
5. directionsDisplay.setDirections(response) hace la magia, imprime en el mapa la ruta y escribe las indicaciones de acuerdo a las 2 instrucciones anteriores.

Por último solamente creamos un par de funciones para que al hacer click en el botón busque la ruta o la redibuje si se eligen diferentes opciones, esto es opcional, si no lo quieren así hay que hacer que indicar que al hacer click, la función central se ejecute, para mi caso, la función la llamé rockAndRoll  😀

$('#buscar').live('click', function(){
	rockAndRoll();
});

$('.opciones_ruta').live('change', function(){
	rockAndRoll();
});

Es todo por esta ocasión, espero les ayude en sus proyectos o simplemente para jugar un rato, si quieren verlo en función denle click en el botón verde, dudas y comentarios son bien recibidos, o pueden encontrarme en twitter @jafrancov

Enjoy this Life!!

Ya hemos visto el cómo obtener geolocalización para ubicar el lugar donde nos encontramos, pero, ¿qué pasa cuando buscamos una dirección diferente a donde nos encontramos?, sería necesario escribir y buscar la dirección deseada, bien pues el proceso es relativamente sencillo. (Para esto requeriremos que agregues los scripts de GMaps y de jQuery, consulta los anteriores post si tienes duda de esto).

Lo que haremos se resume en: escribir una dirección, verificar si existe, si existe, colocar un marcador, centrar y dar zoom en el mapa en la región de la dirección obtenida, si no existe la dirección arrojar un error diciendo que no existe.

La parte importante del código es generar un objeto que nos permita comunicarnos con la API  de Google Maps y nos convierta la dirección en latitud y longitud de manera que podamos maniobrarlas a placer.

var geocoder = new google.maps.Geocoder();

Cuando se genera una petición de Geocoding, pueden enviarse varios parámetros para obtener resultados más específicos, un objeto de solicitud completa comprendería:

• address (obligatorio *): es la dirección que deseas codificar de forma geográfica.
• latLng (obligatorio *): la latitud y la longitud (LatLng ) para las que deseas obtener la dirección interpretable por humanos más cercana.
• bounds (opcional): los límites de latitud y de longitud (LatLngBounds) dentro de los que quieres predeterminar los resultados de codificación geográfica con mayor importancia. Para obtener más información, consulta la sección Especificación de la ventana gráfica que encontrarás a continuación.
• language (opcional): es el idioma en el que se devuelven los resultados.
• region (opcional): el código de región, especificado como una subetiqueta region del lenguaje IANA. En la mayoría de los casos, estas etiquetas se asignan directamente a valores de dos caracteres ccTLD (“dominio de nivel superior”) ya conocidos. Para obtener más información, consulta la sección Especificación del código de región que encontrarás a continuación.

* Nota: la búsqueda funciona incluyendo solamente el campo address, aunque siempre es requisito incluir un campo address o un campo latLng obligatoriamente, si se coloca un campo latLng, el geocoder realizará el proceso conocido como codificación geográfica inversa, o sea, convertir coordenadas en direcciones, pero, eso lo veremos en otro post.

La solicitud se hace de la siguiente manera:

// Obtenemos la dirección y la asignamos a una variable
var address = $('#address').val();
// Creamos el Objeto Geocoder
var geocoder = new google.maps.Geocoder();
// Hacemos la petición indicando la dirección e invocamos la función
// geocodeResult enviando todo el resultado obtenido
geocoder.geocode({ 'address': address}, geocodeResult);

El objeto que se obtiene de respuesta es un JSON, donde lo manejaríamos como regularmente se hace en javascript, el resultado es algo como esto:

{
  "status": "OK",
  "results": [ {
    "types": [ "street_address" ],
    "formatted_address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
    "address_components": [ {
      "long_name": "1600",
      "short_name": "1600",
      "types": [ "street_number" ]
    }, {
      "long_name": "Amphitheatre Pkwy",
      "short_name": "Amphitheatre Pkwy",
      "types": [ "route" ]
    }, {
      "long_name": "Mountain View",
      "short_name": "Mountain View",
      "types": [ "locality", "political" ]
    }, {
      "long_name": "California",
      "short_name": "CA",
      "types": [ "administrative_area_level_1", "political" ]
    }, {
      "long_name": "United States",
      "short_name": "US",
      "types": [ "country", "political" ]
    }, {
      "long_name": "94043",
      "short_name": "94043",
      "types": [ "postal_code" ]
    } ],
    "geometry": {
      "location": {
        "lat": 37.4219720,
        "lng": -122.0841430
      },
      "location_type": "ROOFTOP",
      "viewport": {
        "southwest": {
          "lat": 37.4188244,
          "lng": -122.0872906
        },
        "northeast": {
          "lat": 37.4251196,
          "lng": -122.0809954
        }
      }
    }
  } ]
}

Lo único que nos faltaría es el código para validar, interpretar y dibujar. Para esto, hay 3 cosas importantes que debemos tomar en cuenta del JSON que tenemos de respuesta:

• status: contiene la respuesta del estado de la petición, si fue satisfactoria o si hubo algún error y que tipo de error.
• geometry.location: la ubicación de la dirección solicitada
• geometry.viewport: los límites recomendados para ajustar el zoom del mapa, haciendo un cuadrante con las esquinas Noreste (superior derecha) y Suroeste (inferior izquierda).

Con esto en presente, la función siguiente nos mostrará solamente el primer resultado obtenido, quedando así :

function geocodeResult(results, status) {
    // Verificamos el estatus
    if (status == 'OK') {
        // Si hay resultados encontrados, centramos y repintamos el mapa
        // esto para eliminar cualquier pin antes puesto
        var mapOptions = {
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
        // fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
        map.fitBounds(results[0].geometry.viewport);
        // Dibujamos un marcador con la ubicación del primer resultado obtenido
        var markerOptions = { position: results[0].geometry.location }
        var marker = new google.maps.Marker(markerOptions);
        marker.setMap(map);
    } else {
        // En caso de no haber resultados o que haya ocurrido un error
        // lanzamos un mensaje con el error
        alert("Geocoding no tuvo éxito debido a: " + status);
    }
}

Y listo con esto tenemos terminado nuestro ejercicio, puedes verificarlo en funcionamiento en la página de demos:

El código completo quedaría así:

$(document).ready(function() {
    load_map();
});

var map;

function load_map() {
    var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($("#map_canvas").get(0), myOptions);
}

$('#search').live('click', function() {
    // Obtenemos la dirección y la asignamos a una variable
    var address = $('#address').val();
    // Creamos el Objeto Geocoder
    var geocoder = new google.maps.Geocoder();
    // Hacemos la petición indicando la dirección e invocamos la función
    // geocodeResult enviando todo el resultado obtenido
    geocoder.geocode({ 'address': address}, geocodeResult);
});

function geocodeResult(results, status) {
    // Verificamos el estatus
    if (status == 'OK') {
        // Si hay resultados encontrados, centramos y repintamos el mapa
        // esto para eliminar cualquier pin antes puesto
        var mapOptions = {
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
        // fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
        map.fitBounds(results[0].geometry.viewport);
        // Dibujamos un marcador con la ubicación del primer resultado obtenido
        var markerOptions = { position: results[0].geometry.location }
        var marker = new google.maps.Marker(markerOptions);
        marker.setMap(map);
    } else {
        // En caso de no haber resultados o que haya ocurrido un error
        // lanzamos un mensaje con el error
        alert("Geocoding no tuvo éxito debido a: " + status);
    }
}

Y en el Body solamente esto:

<div><input type="text" maxlength="100" id="address" placeholder="Dirección" /> <input type="button" id="search" value="Buscar" /></div><br/>
<div id='map_canvas' style="width:600px; height:400px;"></div>

Espero les sirva y cualquier cosa, ya saben cómo contactarme…

Enjoy this Life!

En algunas ocasiones existe la necesidad de tener varios marcadores dentro de un mapa, cada uno de ellos con un Listener que está a la espera de que en cuanto hagamos ‘click’ en ellos, despliegue una InfoWindow que le hayamos asignado, pero, existe una desventaja (o ventaja depende del punto de vista) en la API v3 de GMaps, en comparación a la API v2 de GMaps, ésta es que al tener cada marcador con una ventana de información asignada, al momento de hacer click en un marcador se abre, pero si hacemos click en cualquier otro lugar del mapa (que no sea la ‘X’) no se cierra.

Lo que vamos a realizar es un cierre “automático”, esto quiere decir que al tener una InfoWindow abierta y hacer click en cualquier otro lado del mapa, se cierre en automático la ventana abierta en ese momento, de esta manera, siempre quedaría solamente una o ninguna InfoWindow en el mapa, librándonos de tener que estar cerrando manualmente cada una de las ventanas que aparezcan.

En la v2 de la API de GMaps se hacía así:

// Listener para generar y gestionar el InfoWindow
// marker es un objeto tipo Marker
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml("mensaje que quisieras que apareciera");
	});

Con eso era suficiente para que apareciera y desapareciera cuando perdiera el ‘foco‘, ahora para la v3 de la API de GMaps se crearon funciones para abrir (.open()) y cerrar (.close()) la InfoWindow, esto significo tener que especificar un evento para la apertura o cierre de la ventana. Esto no es problema, aunque la situación principal radica cuando tienes muchos marcadores, hacer esto para cada uno de ellos.

Solo es un poco de usar y re-usar funciones para facilitarnos la vida. Vamos a crear 2 variables globales una para el mapa y otra para una única instancia del InfoWindow, no es necesario crear más, con ella podremos crear tantas ventanas como nosotros queramos, por el momento no se les asignará el tipo de objeto, así que quedarán como null.

	var map = null;
	var infoWindow = null;

Vamos a crear dos funciones que son las que van a hacer el ejercicio de abrir y cerrar la ventana, para el ejercicio se requerirá que se declaren como sigue. La función para cerrar no recibirá ningún parámetro, simplemente ejecutará el proceso de cerrar del objeto InfoWindow. La función para abrir, recibirá 2 parámetros, el primero tendrá que ser un objeto tipo Marker y el segundo un String (cadena de caracteres); el marcador previamente debe ser creado con los parámetros mínimos para su uso, es decir su posición y en qué mapa se dibujará; el string será para asignarle el contenido específico del marcador en cuestión, igual si así lo deseas, puedes agregar contenido general.

	function closeInfoWindow() {
		infoWindow.close();
	}

	function openInfoWindow(marker, content) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<div style="text-align:center;">',
			'Las coordenadas del <b>',
			content,
			'</b> son:<br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
			'<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
			'</div>'
		].join(''));
		infoWindow.open(map, marker);
	}

Antes de llegar al código completo, vamos a tener en cuenta una pequeña instrucción, un listener que se le va a agregar al mapa, que es el que va a hacer que al momento de hacer click en cualquier parte del mapa que no sea la el infoWindow, lo cierre, independientemente de cuál sea el que esté abierto.

		google.maps.event.addListener(map, 'click', function(){
			closeInfoWindow();
		});

Finalmente la función que se encargará de echar todo a andar, crear los marcadores y asignarles su Listener, indicar el objeto correspondiente a las variables del Map y del InfoWindow, todo este código ya lo hemos visto, así que todo el código quedaría así

var map = null;
	var infoWindow = null;

	function closeInfoWindow() {
		infoWindow.close();
	}

	function openInfoWindow(marker, content) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<div style="text-align:center;">',
			'Las coordenadas del <b>',
			content,
			'</b> son:<br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arr&aacute;strame y haz click para actualizar la posici&oacute;n.',
			'<br/>O puedes hacer click en cualquier otro lado para cerrarme.',
			'</div>'
		].join(''));
		infoWindow.open(map, marker);
	}

	function initialize() {
		var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
		var myOptions = {
		  zoom: 13,
		  center: myLatlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		}

		map = new google.maps.Map($("#map_canvas").get(0), myOptions);

		infoWindow = new google.maps.InfoWindow();

		google.maps.event.addListener(map, 'click', function(){
			closeInfoWindow();
		});

		var marker1 = new google.maps.Marker({
		    position: myLatlng,
		    draggable: true,
		    map: map
		});

		google.maps.event.addListener(marker1, 'click', function(){
			openInfoWindow(marker1, "Marcador 1");
		});

		var marker2 = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(20.66057, -101.37325),
			draggable: true
		});

		google.maps.event.addListener(marker2, 'click', function() {
			openInfoWindow(marker2, "Marcador 2");
		});

		var marker3 = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(20.67133, -101.32999),
			draggable: true
		});

		google.maps.event.addListener(marker3, 'click', function() {
			openInfoWindow(marker3, "Marcador 3");
		});
	}

	$(document).ready(function() {
	    initialize();
	});

Listo, ahora puedes traspolar este método a algo más dinámico como la consulta de APIs con Geolocalización por ejemplo… prueba, disfruta y practica… si tienes dudas, ya sabes dónde preguntarme :-D.

Enjoy this Life!!

Ya hemos visto como dibujar un marcador y asignarle un InfoWindow, así que esta parte será sencilla, ya que podremos mover el marcador de lugar y a placer, obteniendo las coordenadas de donde fue colocado, los usos que podemos darle varían infinitamente, actualmente podemos ver su uso por ejemplo en Foursquare cuando editamos un vvenue, podemos mover el marcador hasta el lugar más preciso donde se encuentra realmente el venue, más delante podremos hacer polígonos y delimitar las zonas usando las latitudes y longitudes para ser más precisos y bueno… miles de aplicaciones más que se pueden hacer e imaginar con ello, interesante, ¿no?

En la zona de Referencias de la API de GMaps v3 podremos encontrar a detalle las propiedades y funciones de cada elemento que usemos, para este ejemplo usaremos una propiedad de los marcadores que se llama draggable, esta propiedad hace que los marcadores que dibujemos puedan ser “arrastrables“, es decir, que los podamos tomar y arrastrarlos o moverlos a cualquier parte del mapa. Lo único que tenemos que hacer para hacer esa función es escribir en las propiedades del marcador draggable: true como lo veremos a continuación:

		var marker = new google.maps.Marker({
		    position: myLatlng,
		    draggable: true,
		    map: map,
		    title:"Ejemplo marcador arrastrable"
		});

Ahora nos centraremos en la función que se llama openInfoWindow.

	function openInfoWindow(marker) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<b>La posicion del marcador es:</b><br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arrástrame y haz click para actualizar la posición.'
		].join(''));
		infoWindow.open(map, marker);
	}

En la función openInfoWindow podemos observar que recibe un parámetro al que manejaremos con el nombre de marker dentro de la función (al momento de invocar la función puede llamarse de cualquier otra manera, pero es necesario que sea un objeto tipo Marker); dentro de la función declaramos una variable llamada markerLatLng que va a almacenar la propiedad LatLng del marcador mediante la función getPosition(), lo que obtiene es un objeto con la latitud y longitud del marcador que recibió la función, para hacer referencia a cada uno de ellos, es con las subfunciones .lat() y .lng(); en el setContent del InfoWindow asignamos todo el contenido como un arreglo de cadenas, por eso la separación en comas y no con el signo más (+), con la instrucción join se indica que se concatene o se “unan” las cadenas; por último con la función open() de infoWindow mostramos de diálogo con el contenido que le asignamos anteriormente.

Ahora si veamos el código completo, la mayoría del código ya lo hemos visto así que aquí está:

	var map = null;
	var infoWindow = null;

	function openInfoWindow(marker) {
		var markerLatLng = marker.getPosition();
		infoWindow.setContent([
			'<b>La posicion del marcador es:</b><br/>',
			markerLatLng.lat(),
			', ',
			markerLatLng.lng(),
			'<br/><br/>Arrástrame y haz click para actualizar la posición.'
		].join(''));
		infoWindow.open(map, marker);
	}

	function initialize() {
		var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
		var myOptions = {
		  zoom: 13,
		  center: myLatlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		}

		map = new google.maps.Map($("#map_canvas").get(0), myOptions);

		infoWindow = new google.maps.InfoWindow();

		var marker = new google.maps.Marker({
		    position: myLatlng,
		    draggable: true,
		    map: map,
		    title:"Ejemplo marcador arrastrable"
		});

		google.maps.event.addListener(marker, 'click', function(){
			openInfoWindow(marker);
		});
	}

	$(document).ready(function() {
	    initialize();
	});

Para este ejemplo y posteriores comenzaremos a usar funciones para un mejor manejo del código, como pueden ver hemos declarado la variable map e infoWindow como globales, las cuáles podrán usarse a través de las funciones sin temor a que se pierdan las referencias al liberar la función. La razón por la cual es mejor poner este código en una función, es que si requerimos colocar más de un marcador, podamos enlazar un InfoWindow diferente para cada uno, sin necesidad de escribir el mismo código individualmente, además de que la función puede re-usarse tantas veces como sea necesario. Para ver cómo es que funciona este ejercicio ve al siguiente enlace:

Es todo por esta ocasión si tienen dudas ya saben cómo y dónde preguntar, mucha suerte…

Enjoy this Life!!

¿Qué es un Info Window?

Quizá han visto que en muchos de los mapas de mostrados con la tecnología de Google, al dar clicks sobre los marcadores, mapa, formas, etc., nos aparece un cuadro con información, bien, pues eso es un Info Window.

Las opciones que usaremos para la creación del objeto de InfoWindow contendrá los siguientes campos:

• content contiene una cadena de texto o nodo DOM que mostrará al abrir la ventana de información.
• position contiene el LatLng al cuál estará asignado, ten en cuenta que si es asignada a un marcador, automáticamente adquiere el valor de su posición, en caso de no asignarle algún LatLng toma el centro que se muestra por primera vez del mapa, para los polígonos trabaja de manera diferente y lo hablaremos en otro post.
• maxWidth especifica el ancho máximo en pixeles, que podrá adquirir la ventana, por default adquiere el ancho del contenido, sin saturar el espacio del mapa, haciendo saltos de línea en automático, cuando el contenido ha alcanzado el máximo permitido, se expandirá verticalmente igual, sin saturar el espacio del mapa. En caso de que se establezca un determinado ancho, el texto en automático dará saltos de línea al llegar al límite establecido, si el contenido es mucho se extenderá verticalmente sin saturar el espacio.

El contenido del InfoWindow puede contener una cadena de texto, un fragmento de código HTML, o un mismo elemento DOM. Para establecer este contenido, debe hacerse una llamada explícita al constructor del InfoWindow con setContent(). Ten cuidado al usar div’s ya que si le pones estilos y sobrepasa el espacio puede “derramarse” el contenido fuera del InfoWindow.

Ahora si vamos directo al código, este ya solamente es el JavaScript, recuerda agregar jQuery también:

var myLatlng = new google.maps.LatLng(20.68017,-101.35437);
var myOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map($("#map_canvas").get(0), myOptions);

var contentString = '<div id="div_ejemplo">'+
    '<p>Este es un ejemplo de <b>InfoWindow</b>, ' +
    'como puedes ver puedes agregar cualquier cosa, ' +
    'cualquier <em>HTML</em>.</p>' +
    '<p>Este InfoWindow tiene un ancho de 200px ' +
    'y autom&aacute;ticamente da los saltos de l&iacute;nea.</p>'+
    '<p>Para ver el tutorial <a href="http://jafrancov.com/2010/09/info-window-gmaps-api-v3/">'+
    'clickea aqu&iacute;</a>.</p>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Ejemplo InfoWindow"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Solamente un último detalle antes de terminar, podrán observar que al final vemos un addListener, para que se pueda mostrar el InfoWindow al hacer click, es necesario agregar un Listener, que valga la redundancia, está a la escucha de un click, analicémoslo:

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Vamos por partes google.maps.event.addListener, es una función integrada de la API que agregará el listener, requiere de 3 cosas, a quién se le va a asignar el listener, en este caso a marker que es la variable que almacena el objeto del marcador que se dibuja, el tipo de listener que para este caso es un ‘click’ y por último el proceso que realizará, que para el ejemplo es una función. Dentro de la función especificamos lo que hará el listener, haremos uso de infowindow que es la variable que contiene el objeto con los detalles del InfoWindow por supuesto, a la cual se le llama la función open() que es la que se encargará de mostrar el InfoWindow, y esta funcióna a su vez, requiere de 2 parámetros, el primero en qué objeto de mapa se va a agregar (map) y segundo, a qué objeto se le va a asignar (marker), en caso de que no se especifique la segunda variable, se mostrará en el centro inicial del mapa.

Ahora si es todo por este tutorial, espero les sirva, si tienen dudas ya saben dónde y cómo preguntar

Enjoy this Life!!

Lo que voy a intentar hacer es ir al grano del tema del post, para no dar tantas vueltas y quitar toda la paja que viene en la documentación… “Directo y a la cabeza” dicen por ahí.

Para iniciar será necesario y preferente que tengan un poco de conocimiento principalmente de JavaScript y jQuery, asímismo de HTML y un poco de CSS, igual unas pequeñas nociones de HTML5 nos servirán en publicaciones posteriores.

Para empezar hay que declarar nuestra aplicación como HTML5, sencillamente escribiendo el DOCTYPE así:

<!DOCTYPE html>

También para estos ejemplos es necesario incluir los scripts de jQuery, para este dirígete a su sitio oficial, descárgalo y agrega el script, y claro el más importante de estos ejemplos, el script de Google Maps, que para la v3 no es necesario generar una key como en la versión 2 se hacía, ahora solamente agregas el siguiente script:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>

Si puedes observar, al final del script dice sensor=set_to_true_or_false es para indicar si queremos que el sensor identifique la posición del usuario, debes indicar true o false según lo requiera tu aplicación.

NOTA: hay una pequeña discusión sobre la localización de los scripts, puedes ponerlos ya sea dentro del head o del body, pero muchos recomiendan que vayan antes de cerrar la etiqueta body, ya que evita que el contenido principal tarde en mostrarse, entonces… es tu decisión donde colocarlos, al final de cuentas para fines didácticos, funcionan igual en cualquier lado.

Dentro del body vamos a declarar un DIV que incluya su id y estilos para un ancho y alto donde queramos que se dibuje el mapa, debe ser algo como esto:

<div id="map_canvas" style="width: 640px; height: 400px;"></div>

Ahora vamos con las opciones del mapa, primero declaremos la latitud y longitud donde queremos que aparezca nuestro mapa de esta manera:

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

Lo que hace esa línea de código, es que creamos una instancia de un objeto de la API de GMaps que guardará la latitud y longitud del mapa, marcador o sea lo que sea que queramos dibujar, así que recuérdenla bien para futuros usos.

Los valores pueden variar de la siguiente manera:

• myLatitude es el valor del ángulo que parte del ecuador, puede variar de 90 a -90 de norte a sur respectivamente, siendo 0 el ecuador.
• myLongitude es el valor que parte del meridiano de Greenwich, o sea a partir de Londres, Inglaterra, tomando valores que varian de -180 a 180 de este a oeste respectivamente siendo 0 en Londres.

TIP: Si quieres obtener la latitud y longitud específicos dirígete a Maps.Google.com y en los Labs, activa el marcador de latitud y longitud.

Ahora, vamos con las opciones del mapa, las vamos a declarar de la siguiente forma:

var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Fácil de entender, ¿no?, lo que se realiza con esto es que a myOptions se le adjuntan las opciones propias de despliegue del mapa, zoom, es el nivel de visión del mapa, el más bajo 1, el más alto puede variar, ya que en algunos lugares puede ser hasta de un nivel 25 (hasta donde he descubierto), ya dependerá de lo que quieras mostrar en tu aplicación; center, si claro, centra el mapa con la latitud y longitud que un paso antes hemos declarado con la variable myLatlng; mapTypeId es una variable que interpreta el tipo de mapa que se va a desplegar, los cuales pueden ser estos:

• ROADMAP muestra el mapa normal, el que es en 2D, si no se declara nada, este es el tipo por default.
• SATELLITE muestra las cuadros fotografiados de la superficie.
• HYBRID muestra una combinación de cuadro fotográficos, y el mapa 2D con nombres de calles y demás sobrepuesto, es como sobrevolar la superficie con todo y direcciones.
• TERRAIN muestra cuadros del relieve físico de la tierra, elevaciones, ríos, montañas, entre otros.

Lo que prosigue es crear una instancia que guarde, interprete y dibuje todas las opciones que hemos visto de un mapa, recuerden tener jQuery cargado para que les funcione este script:

var map = new google.maps.Map($("#map_canvas").get(0), myOptions);

Así creamos la instancia al mapa y le decimos que lo coloque en el DIV con el ID de map_canvas, así como las opciones que requiere el mapa para ser desplegado correctamente. La variable map nos servirá más delante para tener control sobre el mismo mapa, como dibujar marcadores, formas, líneas, etc., haciéndole referencia.

Por último vamos a colocar/dibujar un marcador, un pin, o como lo quieran llamar, es muy simple hacerlo:

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });

Estas son las opciones básicas y quizá mínimas para dibujar un marcador, para position usaremos la misma variable que usamos para centrar el mapa y colocar el marcador en el centro del mismo, map es la instancia del objeto del mapa sobre el que vamos a colocar el marcador, title es el tooltip del marcador (el que dice un texto cuando dejamos encima el puntero).

Entonces al final, el código lo colocamos en una función que llamaremos initialize, para poder llamarlo posteriormente en cualquier parte de nuestro sitio, que para el ejercicio lo haremos en cuanto se cargue el body, agregando en la etiqueta de apertura:

<body onload="initialize()">

Aunque puedes llamar la función desde cualquier otro lado, ahora si nuestro documento con todo y el script debe verse algo semejante a esto:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 640px; height: 400px;"></div>
</body>
</html>

Es todo por esta ocasión, ya tengo otros ejercicios listos, solamente falta desglozarlos, cualquier duda, ya saben cómo contactarme :D.

Enjoy this Life!!

La Geolocalización es una de las características principales de HTML5, la cual empieza a tener un gran empuje en todos los ámbitos de la web, redes sociales y más.

Ya entramos un poco en la parte de la geolocalización con la API de Firefox, ahora veremos con solamente un poco de código cómo podremos obtener la ubicación de un usuario con HTML5, que en realidad estaremos usando la API de Geolocalización de la W3C (Consorcio World Wide Web), que es el organismo internacional que dicta lo estándares Web. Podremos observar que obtener la información de esta manera es aún más rápida.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var options = { position: new google.maps.LatLng(lat, lng) }
    var marker = new google.maps.Marker(options);
    marker.setMap(map);
  });
}

Con el objeto navigator.geolocation es con el que detectamos si el navegador tiene las capacidades necesarias para detectar la Geolocalización.

El método navigator.geolocation.getCurrentPosition es el que hace la labor de recuperación de la ubicación del usuario mediante el objeto position que se envía a la función. Una vez que se ha llamado a este método, por medio de una función que permita su ejecución, el navegador nos preguntará si le permitimos usar la información de nuestra ubicación, lo hará de esta manera:

Las instrucciones position.coords.latitude y position.coords.longitude extraen la información de latitud y longitud correspondiente de la posición obtenida.

Las últimas 3 líneas del código son las que dibujan el mapa y nos colocan el pin en as coordenadas obtenidas, si quieres dibujar el mapa con estas instrucciones no olvides agregar el siguiente script dentro de las etiquetas head:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" ></script>

Ahora si a disfrutar de la Geolocalización con HTML5.

Enjoy this Life!!