Los mismos mapas de excelente calidad, además de un acuerdo de servicio, asistencia y control sobre los anuncios.
El elemento fundamental en cualquier aplicación del API de Google Maps es el propio mapa. En este documento se explica el uso del objeto GMap2 fundamental y los aspectos básicos de las operaciones de mapa.
La manera más sencilla de empezar a aprender a utilizar el API de Google Maps es observar un sencillo ejemplo. La siguiente página web muestra un mapa de 500 x 300 centrado en Palo Alto, California:
| 
<!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>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Puedes observar este ejemplo y descargarlo para editarlo y manipularlo, pero tendrás que sustituir la clave del archivo por tu propia clave para el API de Google Maps. (Si registras una clave para un directorio concreto, también funcionará con todos los subdirectorios).
Incluso en este sencillo ejemplo, hay cinco aspectos que se deben tener en cuenta:
script.div denominado "map_canvas" que aloja el mapa.onLoad de la etiqueta body.Estos pasos se explican a continuación.
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript">
</script>
La URL http://maps.google.com/maps?file=api&v=2&key=abcdefg permite acceder a la ubicación del archivo JavaScript que incluye todos los símbolos y definiciones necesarios para utilizar el API de Google Maps. Para acceder al API, la página debe contener una etiqueta script con la clave recibida durante el registro dirigido a esta dirección URL. En este ejemplo, la clave se muestra como "abcdefg".
Ten en cuenta que también transmitimos un parámetro sensor para indicar si esta aplicación utiliza un sensor para determinar la ubicación del usuario. En este ejemplo, hemos dejado el parámetro como una variable true_or_false para hacer hincapié en que debes definir este valor en true o false de forma explícita.
<div id="map_canvas" style="width: 500px; height: 300px"></div>
Para que el mapa se muestre en una página web, debemos reservar un lugar para él. Normalmente, lo logramos creando un elemento div con nombre y obteniendo una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador.
En el ejemplo anterior, definimos un objeto div denominado "map_canvas" y definimos su tamaño mediante atributos de estilo. A menos que especifiques de forma explícita un tamaño para el mapa mediante GMapOptions en el constructor, el mapa usará el tamaño del contenedor para definir su propio tamaño.
GMap2: el objeto elemental
var map = new GMap2(document.getElementById("map_canvas"));
La clase de JavaScript que representa a los mapas es GMap2. Cada objeto de esta clase define un único mapa en una página. (Puedes crear más de una instancia de esta clase; cada objeto definirá un mapa independiente en la página). Creamos una nueva instancia de esta clase mediante el operador new de JavaScript.
Al crear una nueva instancia de mapa, se especifica un nodo DOM en la página (normalmente un elemento div) como contenedor para el mapa. Los nodos HTML son secundarios del objeto document de JavaScript y obtenemos una referencia a este elemento mediante el método document.getElementById().
Este código define una variable (denominada map) y asigna la variable a un nuevo objeto GMap2. La función GMap2() es un constructory su definición (condensada para mejorar la claridad a partir de las Referencias para el API de Google Maps) se muestra a continuación:
| Constructor | Descripción |
|---|---|
| GMap2(container, opts?) | Crea un nuevo mapa dentro del container HTML determinado, que normalmente es un elemento DIV. También puedes pasar parámetros opcionales de tipo GMap2Options en el parámetro opts. |
Ten en cuenta que, dado que los tipos en JavaScript son dinámicos, no es necesario pasar ningún parámetro opcional en el constructor, por lo que no lo haremos en este ejemplo.
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Una vez creado el mapa mediante el constructor GMap2, debemos encargarnos de otra tarea: inicializarlo. La inicialización se lleva a cabo mediante el método setCenter() del mapa. El método setCenter() requiere una coordenada GLatLng y un nivel de acercamiento. Es obligatorio enviar este método antes de llevar a cabo cualquier otra operación en el mapa (incluso la configuración de cualquier otro atributo en el propio mapa).
<body onload="initialize()" onunload="GUnload()">
Mientras se procesa una página HTML, se externaliza el modelo de objetos de documentos (DOM) y las imágenes y secuencias de comandos externas se reciben e incorporan al objeto document. Para garantizar que nuestro mapa sólo se añada a la página cuando se cargue por completo, sólo ejecutamos la función que crea el objeto GMap2 cuando el elemento <body> de la página HTML ha recibido un evento onload. De este modo, evitamos un comportamiento impredecible y obtenemos más control acerca del modo y el momento en que se dibuja el mapa.
El atributo onload es un ejemplo de gestor de eventos. El API de Google Maps también proporciona varios eventos que puedes "detectar" para determinar cambios de estado. Consulta la sección sobre eventos de Google Maps y detectores de eventos para obtener más información.
La función GUnload() es una utilidad diseñada para evitar fugas de memoria.
Ahora que tenemos un mapa, necesitamos una manera de hacer referencia a ubicaciones dentro de él. El objeto GLatLng proporciona esta posibilidad dentro del API de Google Maps. Los objetos GLatLng se construyen pasando sus parámetros en el orden habitual en cartografía {latitud, longitud}:
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)
Nota: el proceso de convertir una dirección en un punto geográfico se conoce como codificación geográfica y se trata con todo detalle en la sección Servicios del API de Google Maps.
También resulta igualmente útil definir los límites geográficos de un objeto. Por ejemplo, un mapa muestra una "ventana" actual de todo el mundo en un objeto que se conoce como ventana gráfica. Al ser rectaular, la ventana gráfica se puede definir mediante los puntos de sus esquinas. El objeto GLatLngBounds ofrece esta función, definiendo una región rectangular mediante dos objetos GLatLng que representan las esquinas sudoeste y noreste del cuadro de límites, respectivamente.
Los objetos GLatLng tienen muchas aplicaciones en el API de Google Maps. El objeto GMarker toma un GLatLng del constructor y coloca un marcador de superposición en el mapa en una ubicación geográfica concreta.
El siguiente ejemplo utiliza getBounds() para devolver la ventana gráfica actual y coloca 10 marcadores aleatoriamente en el mapa, dentro de los límites:
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations
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));
}
}
Ver ejemplo (map-markers.html)
Nota: en la sección Superposiciones encontrarás más información sobre los objetos GMarker.
De forma predeterminada, los mapas se muestran en el API de Google Maps mediante mosaicos con el aspecto estándar. No obstante, el API de Google Maps también admite otros tipos de mapas. Los tipos de mapas estándar son los siguientes:
G_NORMAL_MAP: la vista predeterminada.G_SATELLITE_MAP: imágenes de satélite de Google Earth.G_HYBRID_MAP: mezcla de vistas normales y de satélite.G_DEFAULT_MAP_TYPES: una mezcla de estos tres tipos, útil para un procesamiento repetitivo.Puedes definir el tipo de mapa mediante el método setMapType() del objeto GMap2. Por ejemplo, el siguiente código define el mapa para que use la vista de satélite de Google Earth:
var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
Un mapa también contiene varios atributos cuya determinación puede resultar útil. Por ejemplo, para averiguar las dimensiones de la ventana gráfica actual, utiliza el método getBounds() del objeto GMap2 para devolver un valor GLatLngBounds.
Cada mapa contiene también un nivel de acercamiento, que define la resolución de la vista actual. En la vista normal de los mapas se pueden emplear los niveles de acercamiento entre el 0 (el nivel más bajo, que permite ver todo el mundo en un mapa) y el 19 (el más alto, que llega a mostrar edificios concretos). Los niveles de acercamiento varían dependiendo de la parte del mundo que estés observando. En algunos lugares, los datos están mejor definidos que en otros. En la vista por satélite se pueden observar hasta 20 niveles de acercamiento.
Puedes averiguar el nivel de acercamiento actual del mapa mediante el método getZoom() del objeto GMap2.
Encontrarás más información sobre los niveles de acercamiento, los mosaicos de mapas y la creación de tipos de mapas personalizados en la sección Superposiciones de mosaicos.
Ahora que tienes un objeto GMap2, puedes interactuar con él. El objeto básico de mapa tiene un aspecto y comportamiento similar al del mapa con el que interactúas en el sitio web de Google Maps e incorpora muchos comportamientos integrados. El objeto GMap2 también proporciona varios métodos de configuración para modificar el comportamiento del propio objeto de mapa.
De forma predeterminada, los objetos de mapa tienden a reaccionar ante la actividad del usuario del mismo modo que en http://maps.google.com. No obstante, puedes modificar este comportamiento empleando distintos métodos. Por ejemplo, el método GMap2.disableDragging() desactiva la capacidad de hacer clic y arrastrar el mapa a una nueva ubicación.
También puedes interactuar con el mapa mediante la programación. El objeto GMap2 admite varios métodos que modifican el estado del mapa directamente. Por ejemplo, los métodos setCenter(), panTo y zoomIn() operan sobre el mapa mediante la programación, en lugar de la interacción del usuario.
El siguiente ejemplo muestra un mapa, espera dos segundos y se desplaza a un nuevo punto central. El método panTo centra el mapa en un punto determinado. Si el punto especificado se encuentra en la parte visible del mapa, el mapa se desplaza suavemente al punto. De lo contrario, salta directamente a él.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
map.panTo(new GLatLng(37.4569, -122.1569));
}, 1000);
Ver ejemplo (map-animate.html)
Las interacciones más complejas se logran mediante el uso de eventos del API de Google Maps.
Cada mapa incluido en el API de Google Maps puede mostrar una única "ventana de información" del tipo GInfoWindow, que muestra contenido HTML en una ventana flotante sobre el mapa. La ventana de información tiene un aspecto ligeramente parecido al de una burbuja de diálogo de un cómic. Tiene un área de contenido y un pico afilado, cuyo extremo se encuentra en un punto especificado del mapa. Para ver la ventana de información en acción, haz clic en un marcador de Google Maps.
El objeto GInfoWindow no tiene constructor. Al crear el mapa, se creará automáticamente una ventana de información que se incluirá en dicho mapa. No es posible mostrar más de una ventana de información al mismo tiempo para un mapa concreto, pero sí puedes mover la ventana de información y modificar su contenido según sea necesario.
El objeto GMap2 proporciona un método openInfoWindow(), que toma un punto y un elemento DOM HTML como argumentos. El elemento DOM HTML se añade al contenedor de la ventana de información y el extremo de la ventana se fija al punto proporcionado.
El método openInfoWindowHtml() de GMap2 es similar, pero requiere una cadena HTML en lugar de un elemento DOM como segundo argumento.
Para crear una ventana de información, llama al método openInfoWindow, pasándole una ubicación y un elemento DOM que mostrar. En el siguiente código de ejemplo aparece una ventana de información fijada al centro del mapa con un sencillo mensaje "Hello, world".
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
Ver ejemplo (map-infowindow.html)
Para acceder a la documentación completa sobre las ventanas de información, consulta las Referencias para el API de Google Maps.