<!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 () {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.
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));
}
}
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").
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" ?>Códigos de respuesta (Indicados en el tag <code></code>)
- <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>
Constante | Descripción |
G_GEO_SUCCESS | No se han producido errores, la dirección se analizó correctamente y se devolvió su código geográfico. |
G_GEO_BAD_REQUEST | 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 | 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 | 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 | 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 | 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 | 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 | 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. |
| Constante | Descripció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.
