En este artículo vamos a comentar los pasos a seguir para incorporar en las páginas de nuestra web mapas del servicio Google Maps.El ejemplo más sencillo de inserción de un mapa en una página HTML se muestra en el siguiente código:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Ejemplo del API Javascript de Google Maps </title>
<script type="text/javascript"
    src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false">
</script>
<script type="text/javascript">
   function inicializar_mapa() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
   }
</script>
</head>
 <body onload="inicializar_mapa()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
 </body>
 </html>
NOTA: Para que el código de este ejemplo funcione, es necesario sustituir el valor de la clave (key=abcdefg), por una clave real, que se debe solicitar a Google mediante el formulario de la página http://code.google.com/intl/es/apis/maps/signup.html Como se ve en el ejemplo, en el interior del <body></body> del documento, definimos un elemento<div> y le asignamos un identificador (en nuestro caso, “map_canvas”). El mapa de Google se cargará en el interior de este elemento mediante Javascript.En el interior del <head></head> del documento, hacemos referencia a un primer javascript, que contiene las funciones del API de Google Maps que utilizaremos. Despues, programamos un segundo bloque <javascript> que contiene la funcion ‘inicializar_mapa’.  Esta función crea un objeto de la clase ‘GMap2’, y a continuación lo inicializa mediante el método setCenter, con una latitud y longitud determinadas, y un nivel de zoom.Cuando la página termina de cargarse, el atributo ‘onload’ del elemento ‘body’ ejecuta la función inicializar_mapa, y el mapa se visualiza en el interior del div ‘map_canvas’.

Marcadores

El siguiente código es una función inicializar_mapa que un vez creado e inicializado el objeto Gmap2, crea diez marcadores distribuidos aleatoriamente por el mapa:
function inicializar_mapa () {
 
var map = new GMap2(document.getElementById("map_canvas"));
  map
.setCenter(new GLatLng(37.4419, -122.1419), 13);
 
 
// Añade 10 marcadores al mapa, en coordenadas aleatorias
  //dentro de los límites del mapa

 
var bounds = map.getBounds();
 
var southWest = bounds.getSouthWest();
 
var northEast = bounds.getNorthEast();
 
var lngSpan = northEast.lng() - southWest.lng();
 
var latSpan = northEast.lat() - southWest.lat();
 
for (var i = 0; i < 10; i++) {
   
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
        southWest
.lng() + lngSpan * Math.random());
    map
.addOverlay(new GMarker(point));
 
}
}
Como vemos en el ejemplo, los marcadores se crean mediante la creación de instancias de la clase GMarker. Al crear el marcador, se le pasa como argumento un par de coordenadas contenidas en un objeto GLatLng.

Las coordenadas máximas y mínimas del mapa se obtienen solicitando al objeto GMap2, mediante el método getBounds, un objeto del tipo GLatLngBounds, del cual a su vez obtenemos con los métodos getSouthWest y getNorthEast dos objetos del tipo GLatLng, que contienen respectivamente las coordenadas inferior izquierda y superior derecha del mapa.

Obtención de las coordenadas correspondientes a una dirección

El API de Google Maps ofrece un servicio 'geocoder' mediante el cual es posible obtener las coordenadas de una dirección. Para ello se hace la petición mediante una url de la forma http://maps.google.com/maps/geo? con los siguientes parámetros en el URI:
  • q (obligatorio) — La dirección a la que deseas asignar un identificador geográfico.
  • key (obligatorio) — Tu clave del API.
  • sensor (obligatorio) — Indica si la solicitud de codificación geográfica proviene o no de un dispositivo con sensor de ubicación. Este valor debe ser true o false.
  • output (obligatorio) — El formato en el que se debe generar el elemento de salida. Las opciones son xml, kml, csv o (predeterminado) json.
  • ll (opcional) — El par {latitud,longitud} del centro de la ventana gráfica expresado como una cadena separada por comas (por ejemplo, "ll=40.479581,-117.773438" ). Este parámetro sólo adquiere significado si el parámetro spn también se transmite al geocoder.
  • spn (opcional) — La "amplitud" de la ventana gráfica expresada como una cadena separada por comas de un par {latitud,longitud} (por ejemplo, "spn=11.1873,22.5" ). Este parámetro sólo adquiere significado si el parámetro ll también se transmite al geocoder.
  • gl (opcional) — El código de país, especificado como un valor de dos caracteres ccTLD ("dominio de nivel superior").
Nota: Los parámetros de viewport  gl y spn,ll sólamente afectan, pero no restringen plenamente, los resultados del geocoder.Ejemplo: Si queremos obtener información geográfica sobre Toledo, utilizaremos la siguiente url (cambiando el valor del argumento key por una clave real asignada por Google):

http://maps.google.com/maps/geo?q=toledo&key=abcdefg&sensor=false&output=xml&gl=es

Como vemos, estamos limitando la búsqueda a España (gl=es), y solicitamos la respuesta en formato XML (output=xml).

El resultado es el siguiente:

  <?xml version="1.0" encoding="UTF-8" ?> 
- <kml xmlns="http://earth.google.com/kml/2.0">
- <Response>
  <name>toledo</name>
- <Status>
  <code>200</code>
  <request>geocode</request>
  </Status>
- <Placemark id="p1">
  <address>Toledo, España</address>
- <AddressDetails Accuracy="4" xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">
- <Country>
  <CountryNameCode>ES</CountryNameCode>
  <CountryName>España</CountryName>
- <AdministrativeArea>
  <AdministrativeAreaName>CM</AdministrativeAreaName>
- <SubAdministrativeArea>
  <SubAdministrativeAreaName>Toledo</SubAdministrativeAreaName>
- <Locality>
  <LocalityName>Toledo</LocalityName>
  </Locality>
  </SubAdministrativeArea>
  </AdministrativeArea>
  </Country>
  </AddressDetails>
- <ExtendedData>
  <LatLonBox north="39.9250920" south="39.8105550" east="-3.8147915" west="-4.1796354" />
  </ExtendedData>
- <Point>
  <coordinates>-4.0244759,39.8567775,0</coordinates>
  </Point>
  </Placemark>
  </Response>
  </kml>
Códigos de respuesta (Indicados en el tag <code></code>)

Constante

Descripción

G_GEO_SUCCESS
= 200

No se han producido errores, la dirección se analizó correctamente y se devolvió su código geográfico.

G_GEO_BAD_REQUEST
= 400

No se ha podido analizar correctamente la solicitud de ruta. Por ejemplo, la solicitud se puede haber rechazado si contenía más del número máximo de hitos permitidos.

G_GEO_SERVER_ERROR
= 500

No se ha podido procesar correctamente la solicitud de ruta o de códigos geográficos, sin saberse el motivo exacto del fallo.

G_GEO_MISSING_QUERY
= 601

Falta el parámetro HTTP q o no tiene valor alguno. En las solicitudes de códigos geográficos, esto significa que se ha especificado una dirección vacía. En las solicitudes de ruta, esto significa que no se ha especificado ninguna consulta.

G_GEO_UNKNOWN_ADDRESS
= 602

No se ha encontrado una ubicación geográfica que se corresponda con la dirección especificada. Esto puede deberse a que la dirección sea relativamente nueva o a que no sea correcta.

G_GEO_UNAVAILABLE_ADDRESS
= 603

El código geográfico de la dirección indicada o de la ruta para la consulta de ruta proporcionada no puede devolverse por motivos jurídicos o contractuales.

G_GEO_UNKNOWN_DIRECTIONS
= 604

El objeto GDirections no pudo calcular la ruta entre los puntos mencionados en la consulta. Esto suele deberse a que no hay ninguna ruta disponible entre los dos puntos o a que no tenemos datos para extraer rutas en la región en cuestión.

G_GEO_BAD_KEY
= 610

La clave proporcionada no es válida o no coincide con el dominio para el cual se ha indicado.

G_GEO_TOO_MANY_QUERIES
= 620

La clave especificada ha superado el límite de solicitudes en un período de 24 horas o ha enviado demasiadas solicitudes en un período de tiempo demasiado breve. Si vas a enviar varias solicitudes en un bucle o en un período de tiempo muy reducido, utiliza un temporizador o pausa tu código para asegurarte de que no envías las solicitudes demasiado rápido.

Precisión del resultado
ConstanteDescripción
0 Ubicación desconocida.                                      (A partir de la versión 2,59).
1 Precisión a nivel de país.                                     (A partir de la versión 2,59).
2 Región (estado, provincia, prefectura, etc.)     (A partir de la versión 2,59).
3 Subregión (condado, municipalidad, etc.)      (A partir de la versión 2,59).
4 Precisión a nivel de ciudad o pueblo.             (A partir de la versión 2,59).
5 Precisión a nivel de código postal.                  (A partir de la versión 2,59).
6 Precisión a nivel de calle.                                 (A partir de la versión 2,59).
7 Precisión a nivel de intersección.                   (A partir de la versión 2,59).
8 Precisión a nivel de dirección.                        (A partir de la versión 2,59).
9 Instalaciones (nombre del edificio, nombre de la propiedad, centro comercial, etc.) municipalidad, etc.) (A partir de la versión 2,105).

 

Controles

Ahora ya tenemos una página que presenta un mapa de Google, y podemos mover el mapa mediante la función “arrastrar y soltar” (drag and drop). También es posible ampliar la escala haciendo doble click con el boton izquierdo del ratón, y reducirla haciendo doble click con el botón derecho, pero no tenemos los controles que nos permiten seleccionar el tipo de mapa (satélite, híbrido,…), ni el que nos permite cambiar la escala.
Para añadir estos controles, debemos crear los objetos correspondientes y añadirlos al mapa mediante el método addControl
Ejemplo:

map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());

Los controles que incorpora el API de Google Maps y que podemos emplear de este modo son:

  • GLargeMapControl: un control de desplazamiento y acercamiento de gran tamaño empleado en Google Maps. Se muestra en la esquina superior izquierda del mapa de forma predeterminada.
  • GSmallMapControl: un control de desplazamiento y acercamiento más pequeño empleado en Google Maps. Se muestra en la esquina superior izquierda del mapa de forma predeterminada.
  • GSmallZoomControl: un pequeño control de acercamiento (sin desplazamiento) empleado en las pequeñas ventanas de mapas que se utilizan para mostrar los pasos de las rutas en Google Maps.
  • GScaleControl: una escala del mapa, que se presenta por defecto en la esquina inferior izquierda.
  • GMapTypeControl: botones que permiten al usuario alternar entre tipos de mapas (como Mapa y Satélite).
  • GHierarchicalMapTypeControl: una selección de botones anidados y elementos de menú para colocar muchos selectores de tipos de mapas.
  • GOverviewMapControl: un mapa de vista general en la esquina de la pantalla, que se puede contraer.