Antes de que hubiera una API pública, algunos desarrolladores descubrieron la manera de hackear Google Maps para incorporar los mapas en sus propios sitios web. Esto llevó a Google a la conclusión de que había una necesidad de una API pública, y en junio de 2005 fue lanzado públicamente.

El mashup por primera vez en Internet es a menudo considerado que lo ejerció Housingmaps.com, una combinación de Google Maps con los listados de bienes raíces de Craiglist.org. Fue creado de hecho antes de la API pública fuera puesto en libertad y fue hackeado por el desarrollador Paul Rademacher. En mayo de 2010, se anunció la versión 3 del API. Ahora es la opción recomendada para las nuevas aplicaciones de Google Maps y el siguiente paso en la historia de Google Maps.

¿Cómo funciona Google Maps?

Es sólo HTML, CSS y JavaScript trabajando junto. Los mapas son solo imágenes que se cargan en el fondo a través de peticiones ejecutadas por la tecnología de AJAX, y se insertan en un <div> en la página HTML. Mientras navegas en el mapa, el API envía información acerca de las nuevas coordenadas y los niveles de “zoom” de el mapa a través de AJAX y esto retorna las imágenes.

El API consiste de archivos JavaScript que contienen las clases, métodos y propiedades que se usan para el comportamiento de los mapas. ¿Cómo se usan?, de eso se trata esta guía. Esta guía tratará acerca de la última versión creada al momento, la versión 3.

Las coordenadas están expresadas usando números decimales separados por coma.  La latitud siempre precede la longitud.  La latitud es positiva si va después del punto mostrado en el mapa y negativo si va antes.  La longitud es positiva si va arriba del punto y negativa si va debajo.

En los mapas físicos, las coordenadas están expresadas en grados, así que la posición de Puerto Rico sería:
18°14’70” N  66°29’68” W

La forma de convertir estos datos a decimales sería:
(18°14’70” N) = (18 + (14 / 60) + (70 / 3600)) = 18.252
(66°29’68” W) = -(66 + (29 / 60) + (68 / 3600)) = -66.8627
La longitud se multiplica por negativo, porque está a la izquierda (oeste) del punto 0,0. Para esta guía solo vamos a estar trabajando con decimales.

¿Cuánto es el máximo de decimales?

Google maps no se limita a cierta cantidad de decimales. Sin embargo, según unas pruebas hechas, se notó que números mayores a 6 decimales es una perdida de tiempo. Así también google estableció en varios métodos que la mayor cantidad a trabajar es 6 decimales, como por ejemplo el método toUrlValue(). Es decir, cuando vayamos a establecer los decimales se puede hacer así:

  • 5 a 6 decimales: es el máximo que debemos usar para ser específicos
  • 4 decimales: para algún detalle en el mapa
  • 3 decimales: es bueno para centrar ciudades
  • 2 decimales: es apropiado para centrar paises o estados, tal vez 3 por monaco

Preparando el área de trabajo

Para propósito de enseñanza tomaremos el 100% de ancho y el 100% de alto del navegador. También nos limitaremos a explicar solo la parte del API.  Para referencia sobre el último API que contiene las clases, métodos y propiedades pueden ir a la dirección http://code.google.com/intl/es/apis/maps/documentation/javascript/reference.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

En el siguiente código:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&;amp;language=es"></script>

La dirección apunta al API, pero también se requiere pasar una cadena de consulta con la llave sensor. Esto le indica a Google si el dispositivo que usa el mapa, tiene un dispositivo que determina la geolocalización, como por ejemplo un GPS. Es forzoso mencionarlo y como valor indicar si es falso o cierto. Falso para los que no lo usan y cierto para los que sí lo usan. Esto lo usa Google para proveer estadísticas a sus proveedores.  No tiene que ver con habilitarlo para la geolocalización.

También se añadió el lenguaje, aunque el API trata de determinar cual es el lenguaje a mostrar, pero puedes especificarlo usando la llave language. En este ejemplo no hemos mencionado la llave api ya que para la versión 3 no se usa.

<script type="text/javascript" src="map.js"></script>

Es importante que el código mencionado anteriormente, se encuentre debajo del elemento <script> que incluye el API, para que así se pueda cargar todas las clases, métodos y propiedades a usar.  Las clases, métodos y propiedades comienzan con google.maps. A eso se le conoce como namespace.

Dentro del archivo map.js escribimos:

window.onload = function(){
	var options = {
		zoom: 8
		, center: new google.maps.LatLng(18.2, -66.4)
		, mapTypeId: google.maps.MapTypeId.SATELLITE
	};
	var map = new google.maps.Map(document.getElementById('map'), options);
};

Esto nos trae el mapa de Puerto Rico. ¿Qué es lo que hace? Primero indicamos que queremos que el mapa se muestre una vez se haya cargado toda la información con el evento window.onload. Para iniciar el mapa hacemos uso de la clase google.maps.Map(). A este se le indica dos argumentos:

  • La referencia hacia el elemento que mostrará el mapa, en este caso el elemento <div> con el  atributo id que tiene como valor map.
  • Una notación literal llamada MapOptions que contiene la configuración inicial para mostrar el mapa como por ejemplo,  el “zoom”, donde está el centro y que tipo de mapa deseamos mostrar.

MapOptions

MapOptions contiene la información de cómo queremos ver el mapa y cómo queremos que se comporte. Se requiere tres propiedades:

  • zoom: Define el “zoom” inicial. Debe ser un número entre el 1 y el 23.  El 1 es el mapa completamente afuera y 23 es completamente adentro.
  • center: Define el centro del mapa con las coordenadas. Las coordenadas debe indicarse usando el método  google.maps.LatLng(latitud, longitud).
  • mapTypeId: Define que tipo de mapa se desea mostrar al inicio.

Los opcionales son:

  • keyboardShortcuts: Habilita o inhabilita el uso del teclado. Las teclas a usar son las flechas para mover el mapa y +/- para el “zoom”.
    Valores: true|false, por defecto true.
  • disableDoubleClickZoom: Habilita o inhabilita el doble click del ratón para hacer “zoom”.
    Valores: true|false por defecto false.
  • draggable: Habilita o inhabilita el poder arrastrar el mapa.
    Valores: true|false, por defecto true.
  • scrollwheel: Habilita o inhabilita el poder hacer “zoom” con la rueda del ratón.
    Valores: true|false, por defecto true.
  • draggableCursor: Indica que tipo de cursor deseas mostrar cuando el ratón está encima del mapa. El valor es del tipo cadena y pueden ser los que una computadora tiene por defecto y la mayoría de los que están mencionado en el siguiente listado o puede ser uno personalizado y la  ruta puede ser local (en el servidor de la aplicación) o una dirección web externa.
  • draggingCursor: Indica que tipo de cursor deseas mostrar cuando el ratón está presionado en el mapa. El valor es del tipo cadena y pueden ser los que una computadora tiene por defecto y la mayoría de los que están mencionado en el siguiente listado o puede ser uno personalizado y la  ruta puede ser local (en el servidor de la aplicación) o una dirección web externa.
  • backgroundColor: Esta propiedad afecta el color del fondo del contenedor. Típicamente se ve cuando se arrastra el mapa o cuando carga al inicio. Puedes usar un valor hexadecimal o la forma estándar (red, yellow, green, blue, etc). Por defecto el color es con el valor hexádecimal #E5E3DF
  • noClear: Habilita o inhabilita que se sobre-escriba lo que haya en el contenedor.  Por lo regular la forma como se  trabaja para colocar contenido encima del contenedor es usando un elemento fuera del contenedor que muestra el mapa y con CSS se coloca en el lugar deseado en el mapa.
    Valores: true|false, por defecto false.
  • disableDefaultUI: Habilita o inhabilita mostrar el UI que viene predefinido.
    Valores: true|false, por defecto false.
  • mapTypeControl: Habilita o inhabilita el control de tipo de mapa.
  • mapTypeControlOptions: Son las opciones de visualización iniciales del control de tipo de mapa.
  • navigationControl: Habilita o inhabilita el control de navegación.
    Valores: true|false, por defecto true.
  • navigationControlOptions: Son las opciones de visualización iniciales del control de navegación.
  • scaleControl: Habilita o inhabilita el control de escala.
    Valores: true|false, por defecto true.
  • scaleControlOptions: Son las opciones de visualización iniciales del control de escala.
  • streetViewControl: Habilita o inhabilita el hombrecito de “Street View”. Está disponible en ciertas áreas.
    Valores: true|false, por defecto false.

Modificamos y añadimos el siguiente código al archivo map.js

window.onload = function(){
	var options = {
		zoom: 8
		, center: new google.maps.LatLng(18.2, -66.4)
		, mapTypeId: google.maps.MapTypeId.SATELLITE

		, backgroundColor: '#ffffff'
 		, noClear: true
		, disableDefaultUI: true
		, keyboardShortcuts: false
		, disableDoubleClickZoom: true
		, draggable: false
		, scrollwheel: false
		, draggableCursor: 'move'
		, draggingCursor: 'move'

		, mapTypeControl: true
		, mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU
			, position: google.maps.ControlPosition.TOP_LEFT
			, mapTypeIds: [
				google.maps.MapTypeId.SATELLITE
			]
		}
		, navigationControl: true
		, streetViewControl: true
		, navigationControlOptions: {
			position: google.maps.ControlPosition.TOP_RIGHT
			, style: google.maps.NavigationControlStyle.ANDROID
		}
		, scaleControl: true
		, scaleControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
			, style: google.maps.ScaleControlStyle.DEFAULT
		}
	};
	var map = new google.maps.Map(document.getElementById('map'), options);
};

Modificar los valores ya asignados

Hasta ahora, hemos iniciado los valores directamente en el MapOptions para iniciar el mapa. Luego de que se hayan cargado, podemos modificarlos con el método setOptions. Podemos modificar la mayoría de las propiedades.  Solo tres no son modificables: noClear, backgroundColor y disableDefaultUI, por lo que debemos estar seguros qué debemos hacer con ellos al inicio.  El setOptions es de gran utilidad para interactuar con el usuario. Veamos un ejemplo

window.onload = function(){
	var options = {
		zoom: 8
		, center: new google.maps.LatLng(18.2, -66.4)
		, mapTypeId: google.maps.MapTypeId.SATELLITE

		, backgroundColor: '#ffffff'
 		, noClear: true
		, disableDefaultUI: true
		, keyboardShortcuts: false
		, disableDoubleClickZoom: true
		, draggable: false
		, scrollwheel: false
		, draggableCursor: 'move'
		, draggingCursor: 'move'

		, mapTypeControl: true
		, mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU
			, position: google.maps.ControlPosition.TOP_LEFT
			, mapTypeIds: [
				google.maps.MapTypeId.SATELLITE
			]
		}
		, navigationControl: true
		, streetViewControl: true
		, navigationControlOptions: {
			position: google.maps.ControlPosition.TOP_RIGHT
			, style: google.maps.NavigationControlStyle.ANDROID
		}
		, scaleControl: true
		, scaleControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
			, style: google.maps.ScaleControlStyle.DEFAULT
		}
	};

	var map = new google.maps.Map(document.getElementById('map'), options);

	map.setOptions({
		zoom: 10
		, center: new google.maps.LatLng(18.17, -66.42)
		, mapTypeId: google.maps.MapTypeId.TERRAIN

		, keyboardShortcuts: true
		, disableDoubleClickZoom: false
		, draggable: true
		, scrollwheel: true
		, draggableCursor: 'hand'
		, draggingCursor: 'hand'

		, mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			, position: google.maps.ControlPosition.TOP_RIGHT
			, mapTypeIds: [
				google.maps.MapTypeId.ROADMAP
				, google.maps.MapTypeId.SATELLITE
			]
		}

		, navigationControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
			, style: google.maps.NavigationControlStyle.ZOOM_PAN
		}

		, scaleControlOptions: {
			position: google.maps.ControlPosition.BOTTOM_LEFT
			, style: google.maps.ScaleControlStyle.DEFAULT
		}
	});
};

Getters y Setters

Existen unos métodos que nos permiten solo modificar y/o obtener los resultados de las propiedades que son requisitos.

  • getZoom()
  • setZoom(1-23)
  • getCenter()
  • setCenter(google.maps.LatLng(latitud, longitud))
  • getMapTypeId()
  • setMaptTypeId(google.maps.MapTypeId.*)

Uniendo todo

window.onload = function(){
	var options = {
		zoom: 8
		, center: new google.maps.LatLng(18.2, -66.4)
		, mapTypeId: google.maps.MapTypeId.SATELLITE

		, backgroundColor: '#ffffff'
 		, noClear: true
		, disableDefaultUI: true
		, keyboardShortcuts: false
		, disableDoubleClickZoom: true
		, draggable: false
		, scrollwheel: false
		, draggableCursor: 'move'
		, draggingCursor: 'move'

		, mapTypeControl: true
		, mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_MENU
			, position: google.maps.ControlPosition.TOP_LEFT
			, mapTypeIds: [
				google.maps.MapTypeId.SATELLITE
			]
		}
		, navigationControl: true
		, streetViewControl: true
		, navigationControlOptions: {
			position: google.maps.ControlPosition.TOP_RIGHT
			, style: google.maps.NavigationControlStyle.ANDROID
		}
		, scaleControl: true
		, scaleControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
			, style: google.maps.ScaleControlStyle.DEFAULT
		}
	};

	var map = new google.maps.Map(document.getElementById('map'), options);

	map.setOptions({
		zoom: 10
		, center: new google.maps.LatLng(18.17, -66.42)
		, mapTypeId: google.maps.MapTypeId.TERRAIN

		, keyboardShortcuts: true
		, disableDoubleClickZoom: false
		, draggable: true
		, scrollwheel: true
		, draggableCursor: 'hand'
		, draggingCursor: 'hand'

		, mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			, position: google.maps.ControlPosition.TOP_RIGHT
			, mapTypeIds: [
				google.maps.MapTypeId.ROADMAP
				, google.maps.MapTypeId.SATELLITE
			]
		}

		, navigationControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
			, style: google.maps.NavigationControlStyle.ZOOM_PAN
		}

		, scaleControlOptions: {
			position: google.maps.ControlPosition.BOTTOM_LEFT
			, style: google.maps.ScaleControlStyle.DEFAULT
		}
	});

	map.setZoom(9);
	var zoomLevel = map.getZoom();

	map.setCenter(new google.maps.LatLng(18.17, -66.3));
	var centerOfMap = map.getCenter();

	map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
	var mapTypeIdOfMap = map.getMapTypeId();

	alert(zoomLevel + ' -- ' + centerOfMap + ' -- ' + mapTypeIdOfMap);
};