Los mismos mapas de excelente calidad, además de un acuerdo de servicio, asistencia y control sobre los anuncios.
El API de Google Maps se amplía de forma regular, mediante la adición de nuevas funciones y características que se suelen publicar primero en maps.google.com. En esta sección se describen estos servicios. Nota: dado que la definición de un "servicio" es flexible, esta sección es una especie de cajón de sastre. Básicamente, esta sección es donde ponemos todas las cosas ingeniosas que no podíamos poner en ninguna otra parte.
El API de Google Maps exporta un método predeterminado para crear objetos XmlHttpRequest() independientes del navegador que funcionen en las versiones más recientes de Internet Explorer, Firefox y Safari. Al igual que todos los objetos XmlHttpRequest, los archivos recuperados deben encontrarse en el dominio local. El siguiente ejemplo descarga un archivo denominado myfile.txt y muestra su contenido en un objeto alert() de JavaScript:
|
var request = GXmlHttp.create();
request.open("GET", "myfile.txt", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert(request.responseText);
}
}
request.send(null);
El API también exporta un método GDownloadUrl() más sencillo para las solicitudes GET HTTP que elimina la necesidad de realizar la comprobación de XmlHttpRequest() readyState. El ejemplo anterior se puede reescribir para emplear GDownloadUrl():
GDownloadUrl("myfile.txt", function(data, responseCode) {
alert(data);
});
Puedes analizar un documento XML con el método estático GXml.parse(), que requiere una cadena XML como único argumento. Este método es compatible con la mayoría de los navegadores modernos, pero genera una excepción si el navegador no admite el análisis XML de forma nativa.
En este ejemplo, descargamos un archivo estático ("data.xml") que contiene una lista de coordenadas de latitud y longitud en XML mediante el método GDownloadUrl. Una vez completada la descarga, analizamos el XML mediante GXml y creamos un marcador en cada uno de estos puntos del documento XML.
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>
GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
}
});
Ver ejemplo (xhr-requests.html). En este ejemplo se ha utilizado un archivo de datos XML externo data.xml.
Consulta las referencias de las clases GXmlHttp y GXml para obtener más información.
La codificación geográfica es el proceso de transformar direcciones (como "1600 Amphitheatre Parkway, Mountain View, CA") en coordenadas geográficas (como 37.423021 de latitud y -122.083739 de longitud), que se pueden utilizar para colocar marcadores o situar el mapa. El API de Google Maps incluye un servicio de codificación geográfica al que se puede acceder directamente mediante solicitudes HTTP o un objeto GClientGeocoder.
Ten en cuenta que la codificación geográfica es un proceso que consume mucho tiempo y recursos. Siempre que sea posible, realiza una codificación geográfica previa de tus direcciones (mediante el codificador HTTP o cualquier otro servicio de codificación) y almacena tus resultados en una caché de codificación geográfica.
Puedes acceder al servicio de asignación de identificadores geográficos del API de Google Maps a través del objeto GClientGeocoder. Utiliza GClientGeocoder.getLatLng() para convertir una cadena de dirección en un objeto GLatLng. Este método utiliza como parámetros una cadena de dirección que se debe convertir y una función de devolución de llamada que se debe ejecutar al recuperar la dirección. La función de devolución de llamada es necesaria, dado que la codificación geográfica implica el envío de una solicitud a los servidores de Google y puede tardar bastante.
En este ejemplo, realizamos la codificación geográfica de una dirección, añadimos un marcador en ese punto y abrimos una ventana de información que muestra la dirección. Observa que la devolución de llamada se pasa como una función literal.
var map = new GMap2(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
Ver ejemplo (geocoding-simple.html)
También puedes modificar el geocoder del API de Google Maps para dar preferencia a los resultados situados dentro de una determinada ventana gráfica (expresada como un cuadro delimitador del tipo GLatLngBounds) mediante el método GClientGeocoder.setViewport(). Puedes hacer que los resultados se devuelvan ajustados a medida de un dominio (país) concreto mediante el método GClientGeocoder.setBaseCountryCode(). Puedes enviar solicitudes de codificación geográfica para todos los dominios en los que la aplicación principal de Google Maps ofrezca la función de codificación geográfica. Por ejemplo, las búsquedas de "Toledo" devolverán distintos resultados en el dominio de España (http://maps.google.es), especificado con el código de país "es", que en el dominio predeterminado de Estados Unidos (http://maps.google.com).
Si deseas acceder a información estructurada sobre una dirección, GClientGeocoder también proporciona un método getLocations() que devuelve un objeto JSON que consta de la siguiente información:
Statusrequest: el tipo solicitado. En este caso, siempre es geocode.code: un código de respuesta (similar a los códigos de estado HTTP) que indica si la solicitud de codificación geográfica se ha realizado correctamente o no. Consulta la lista completa de códigos de estado.Placemark -- Si el geocoder encuentra varias coincidencias, es posible que se devuelvan varios marcadores de posición.address: una versión de la dirección con formato elegante y uso correcto de mayúsculas y minúsculas.AddressDetails: dirección en formato xAL o lenguaje de direcciones extensible, un estándar internacional para el formato de direcciones.Accuracy: un atributo que indica la precisión con la que se puede realizar la codificación geográfica de la dirección. Consulta una lista de posibles valores.Point: un punto en el espacio 3D.coordinates: longitud, latitud y altitud de la dirección. En este caso, la altitud siempre se define como 0.A continuación, reproducimos el objeto JSON devuelto por el codificador geográfico para la dirección de la sede principal de Google:
{
"name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
"Status": {
"code": 200,
"request": "geocode"
},
"Placemark": [
{
"address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
"AddressDetails": {
"Country": {
"CountryNameCode": "US",
"AdministrativeArea": {
"AdministrativeAreaName": "CA",
"SubAdministrativeArea": {
"SubAdministrativeAreaName": "Santa Clara",
"Locality": {
"LocalityName": "Mountain View",
"Thoroughfare": {
"ThoroughfareName": "1600 Amphitheatre Pkwy"
},
"PostalCode": {
"PostalCodeNumber": "94043"
}
}
}
}
},
"Accuracy": 8
},
"Point": {
"coordinates": [-122.083739, 37.423021, 0]
}
}
]
}
En este ejemplo, utilizamos el método getLocations() para realizar la codificación geográfica de las direcciones y extraemos la versión con formato elegante de la dirección y el código de país de dos letras del JSON para mostrar estos datos en la ventana de información.
var map;
var geocoder;
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("\"" + address + "\" not found");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
Ver ejemplo (geocoding-extraction.html)
El término codificación geográfica suele hacer referencia a traducir una dirección interpretable por humanos en un punto en el mapa. El proceso de conversión o traducción de un punto en una dirección interpretable por humanos se conoce como codificación geográfica inversa.
El método GClientGeocoder.getLocations() es compatible con ambos tipos de codificación geográfica, la estándar y la inversa. Si transmites este método a un objeto GLatLng en lugar de una direcciónString, el geocoder realizará una búsqueda inversa y devolverá un objeto JSON estructurado de la ubicación localizable mediante dirección más cercana. Ten en cuenta que la ubicación localizable mediante dirección más cercana puede estar situada a cierta distancia de los valores de latitud y longitud originales de la consulta, si el objeto GLatLng proporcionado no se corresponde exactamente con ninguna de las ubicaciones localizables mediante dirección.
Nota: la codificación geográfica no es una ciencia exacta. El geocoder intentará buscar la ubicación localizable mediante dirección más cercana dentro de un determinado margen; si no encuentra ninguna correspondencia, el geocoder devolverá, por lo general, un código de estado G_GEO_UNKNOWN_ADDRESS (602).
var map;
var geocoder;
var address;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.730885,-73.997383), 15);
map.addControl(new GLargeMapControl);
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
}
function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
function showAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
'<b>orig latlng:</b>' + response.name + '<br/>' +
'<b>latlng:</b>' + place.Point.coordinates[0] + "," + place.Point.coordinates[1] + '<br>' +
'<b>Status Code:</b>' + response.Status.code + '<br>' +
'<b>Status Request:</b>' + response.Status.request + '<br>' +
'<b>Address:</b>' + place.address + '<br>' +
'<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
Ver ejemplo (geocoding-reverse.html)
GClientGeocoder está equipado por defecto con una memoria caché en el lado del cliente. La caché almacena las respuestas del codificador geográfico, a fin de permitir respuestas más rápidas si las direcciones se vuelven a codificar. Puedes desactivar la caché pasando null al método setCache() del objeto GClientGeocoder. No obstante, recomendamos dejar activada la caché, dado que esto mejora el rendimiento. Para cambiar la caché utilizada por GClientGeocoder, ejecuta setCache() y transmite la nueva caché. Para vaciar el contenido de la caché actual, ejecuta el método reset() en el geocoder o en la caché directamente.
Animamos a los programadores a crear sus propias cachés en el lado del cliente. En este ejemplo, construimos una caché que contiena respuestas del codificador geográfico preprocesadas para seis capitales de países cubiertas por el API de codificación geográfica. En primer lugar, creamos una matriz de respuestas de codificación geográfica. A continuación, creamos una caché personalizada que amplía un objeto GeocodeCache estándar. Una vez definida la caché, llamamos al método setCache(). No se realiza una comprobación estricta de los objetos almacenados en la caché, por lo que también es posible almacenar otro tipo de información (como el número de habitantes).
// Builds an array of geocode responses for the 6 capitals
var city = [
{
name: "Washington, DC",
Status: {
code: 200,
request: "geocode"
},
Placemark: [
{
address: "Washington, DC, USA",
population: "0.563M",
AddressDetails: {
Country: {
CountryNameCode: "US",
AdministrativeArea: {
AdministrativeAreaName: "DC",
Locality: {
LocalityName: "Washington"
}
}
},
Accuracy: 4
},
Point: {
coordinates: [-77.036667, 38.895000, 0]
}
}
]
},
... // etc., and so on for other cities
];
var map;
var geocoder;
// CapitalCitiesCache is a custom cache that extends the standard GeocodeCache.
// We call apply(this) to invoke the parent's class constructor.
function CapitalCitiesCache() {
GGeocodeCache.apply(this);
}
// Assigns an instance of the parent class as a prototype of the
// child class, to make sure that all methods defined on the parent
// class can be directly invoked on the child class.
CapitalCitiesCache.prototype = new GGeocodeCache();
// Override the reset method to populate the empty cache with
// information from our array of geocode responses for capitals.
CapitalCitiesCache.prototype.reset = function() {
GGeocodeCache.prototype.reset.call(this);
for (var i in city) {
this.put(city[i].name, city[i]);
}
}
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.441944, -122.141944), 6);
// Here we set the cache to use the UsCitiesCache custom cache.
geocoder = new GClientGeocoder();
geocoder.setCache(new CapitalCitiesCache());
Ver ejemplo (geocoding-cache.html)
También puedes acceder al geocoder del API de Google Maps directamente mediante secuencias de comandos de servidor. No se recomienda el uso de este método frente al uso del geocoder de cliente; no obstante, resulta útil con fines de depuración, en aquellos casos en los que no hay un objeto GClientGeocoder de JavaScript disponible.
Para acceder al geocoder del API de Google Maps, envía una solicitud a 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: The gl and spn,ll viewport parameters will only influence, not fully restrict, results from the geocoder.
En este ejemplo, solicitamos las coordenadas geográficas de la sede principal de Google:
http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml&sensor=true_or_false&key=abcdefg
En este ejemplo, hemos dejado el parámetro sensor como una variable true_or_false para hacer hincapié en que debes definir este valor en true o false de forma explícita.
Si especificas json como formato de salida, la respuesta se proporciona en forma de objeto JSON. Si especificas xml o kml, la respuesta se devuelve en código KML. Los resultados en formato XML y KML son idénticos, excepto por los tipos MIME.
Por ejemplo, esta es la respuesta que devuelve el codificador geográfico para "1600 amphitheatre mountain view ca".
<kml xmlns="http://earth.google.com/kml/2.0">
<Response>
<name>1600 amphitheatre mountain view ca</name>
<Status>
<code>200</code>
<request>geocode</request>
</Status>
<Placemark>
<address>
1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA
</address>
<AddressDetails Accuracy="8">
<Country>
<CountryNameCode>US</CountryNameCode>
<AdministrativeArea>
<AdministrativeAreaName>CA</AdministrativeAreaName>
<SubAdministrativeArea>
<SubAdministrativeAreaName>Santa Clara</SubAdministrativeAreaName>
<Locality>
<LocalityName>Mountain View</LocalityName>
<Thoroughfare>
<ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName>
</Thoroughfare>
<PostalCode>
<PostalCodeNumber>94043</PostalCodeNumber>
</PostalCode>
</Locality>
</SubAdministrativeArea>
</AdministrativeArea>
</Country>
</AddressDetails>
<Point>
<coordinates>-122.083739,37.423021,0</coordinates>
</Point>
</Placemark>
</Response>
</kml>
Si prefieres una respuesta más breve, que resulte más sencilla de analizar, y no necesitas funciones especiales como resultados múltiples o un formato elegante, también proporcionamos resultados en formato csv. Una respuesta devuelta en formato csv consta de cuatro números, separados por comas:
Los siguientes ejemplos muestran las respuestas a tres direcciones, ordenadas de menor a mayor precisión: "State St, Troy, NY", "2nd st & State St, Troy, NY" and "7 State St, Troy, NY"
200,6,42.730070,-73.690570 200,7,42.730210,-73.691800 200,8,42.730287,-73.692511
El uso de objetos panorámicos de Street View requiere que el navegador del cliente sea compatible con el complemento de Flash.
Street View de Google proporciona vistas panorámicas en 360 grados desde carreteras designadas dentro de la zona de cobertura de Google Maps. A continuación, se muestra una imagen de ejemplo de Street View.
Google Street View utiliza el complemento Flash® compatible con la mayoría de navegadores para mostrar estas imágenes interactivas. Ahora el API de Google Maps proporciona el servicio de Street View para obtener y manipular las imágenes utilizadas en Street View de Google Maps.
GStreetviewPanoramaLas imágenes de Street View son compatibles gracias al objeto GStreetviewPanorama, que proporciona una interfaz del API al visor de Street View Flash®. Para incorporar Street View a la aplicación de API de Google Maps, deberás llevar a cabo estos sencillos pasos:
<div>) para albergar el visor de Street View Flash®.GStreetviewPanorama y colócalo en el contenedor.603.El objeto GStreetviewPanorama requiere un elemento de contenedor en su constructor. Opcionalmente, también permite establecer su ubicación mediante el parámetro GStreetviewPanoramaOptions. Puedes llamar a setLocationAndPOV() en el objeto después de la construcción para modificar su ubicación y punto de vista.
A continuación encontrarás más información sobre los contenedores y la definición de ubicaciones y puntos de vista.
El visor Flash de Street View requiere un nodo DOM de contenedor en el que mostrar el contenido, normalmente un elemento <div>. Para la visualización óptima de las imágenes panorámicas, recomendamos un tamaño mínimo de 200 x 200 píxeles. No recomendamos utilizar visores de gran tamaño, ya que pueden provocar que el visor Flash consuma demasiada memoria y afectar negativamente al rendimiento del navegador.
El constructor GStreetviewPanorama requiere que un parámetro container identifique el elemento del contenedor inicial con el que mostrar el visor Flash de Street View. Puedes utilizar la acción hide() con el objeto GStreetviewPanorama para desactivar temporalmente la visualización o show() para volver a activar la presentación visual del visor.
Si en algún momento deseas modificar el contenedor del visor Flash de Street View, envíale un método setContainer(), pasándole el nuevo elemento al que debe adjuntarse. Si se modifica el tamaño del contenedor, puedes enviar un método checkResize() al objeto GStreetviewPanorama para forzar un cambio de tamaño, de modo que se ajuste a las nuevas dimensiones.
Si quieres eliminar por completo del DOM el visor Flash de Street View y liberar la memoria correspondiente, pasa el método remove() al objeto. Debes llamar a este método si deseas eliminar el elemento de contenedor del DOM, de lo contrario se producirían fugas de memoria en el navegador del cliente.
Una imagen de Street View consta de una ubicación (que se corresponde con un objeto GLatLng) y una orientación concreta (un objeto GPov), que juntos identifican la vista para la visualización de la imagen. Ambos parámetros se pueden especificar al construir el objeto de Street View mediante el parámetro opcional GStreetviewPanoramaOptions.
La lista de las ciudades actualmente compatibles con Street View está disponible en el Centro de asistencia de Google Maps. Existen tres métodos básicos para determinar si una ubicación admite datos de Street View:
GLatLng de una ubicación válida conocida de Street View.GStreetviewOverlay e inspeccionar visualmente la red de carreteras. Las carreteras que admiten Street View se muestran destacadas en azul en la superposición. Puedes utilizar eventos de clic o lógica de codificación geográfica para pasar ubicaciones compatibles a objetos de GStreetviewPanorama. (Consulta Superposiciones de Street View).GStreetviewClient para realizar consultas de objetos de Street View una vez transmitidos los objetos GLatLng. El objeto GStreetviewClient admite varias consultas para encontrar datos panorámicos. (Visita la sección Consultas de clientes de Street View).Observa que los dos últimos métodos son inexactos: el servicio de Street View no requiere (y normalmente no recibe) latitudes y longitudes exactas en estos casos, sino que busca la existencia de datos panorámicos cerca de un objeto GLatLng determinado.
El siguiente ejemplo emplea GStreetviewPanoramaOptions para especificar la latitud y la longitud iniciales que deben emplearse en Street View. El valor de punto de vista se deja en blanco, lo que indica la vista predeterminada hacia el Norte.
var fenwayPark = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:fenwayPark };
var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
Ver ejemplo (streetview-simple.html)
Dado que Street View requiere la compatibilidad con el complemento Flash®, tu código debe comprobar si dicho complemento está disponible para su uso en el navegador de los usuarios. Puedes implementar esta comprobación en la aplicación registrando un detector de eventos para el evento error en el objeto GStreetviewPanorama. El evento error pasa un código de error que se puede evaluar.
El siguiente código de ejemplo lleva a cabo una comprobación rápida de la compatibilidad con el complemento Flash y muestra un cuadro de diálogo de alerta si dicha compatibilidad no existe.
var fenwayPark = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:fenwayPark };
myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
La ubicación de Street View define la posición de la cámara para una imagen, pero no la orientación. Con esa finalidad, el objeto literal GPov define tres propiedades:
yaw define el ángulo de rotación alrededor de la posición de la cámara en grados relativos desde el Norte absoluto. Los ángulos "yaw" se miden en el sentido de las agujas del reloj (un valor de 90 grados equivale al Este absoluto).pitch define la inclinación hacia arriba o hacia abajo respecto a la predeterminada de la cámara, que normalmente (aunque no siempre) es totalmente horizontal. (Por ejemplo, una imagen tomada en una colina probablemente no mostrará una inclinación horizontal). Los ángulos de inclinación se miden con valores negativos hacia arriba (hasta -90 grados en línea recta hacia arriba y en diagonal hacia el grado de inclinación predeterminado) y valores positivos hacia abajo (hasta +90 grados en línea recta hacia abajo y en diagonal hacia el grado de inclinación predeterminado).zoom define el nivel de acercamiento de la vista (delimitando de forma efectiva el campo de visión). El valor 0 indica un alejamiento total. Distintas ubicaciones de Street View pueden proporcionar niveles de acercamiento superiores o inferiores.De forma predeterminada, todos estos valores permanecen en 0 y definen una vista plana horizontal, directamente al Norte, con el campo de visión más amplio posible.
Tal como hemos descrito anteriormente, puedes establecer la ubicación y el valor GPov para un objeto panorámico al construirlo mediante el parámetro GStreetviewPanoramaOptions.
fenwayPark = new GLatLng(42.345573,-71.098326);
myPOV = {yaw:370.64659986187695,pitch:-20};
svOpts = {latlng:fenwayPark, pov:myPOV};
var myPano = new GStreetviewPanorama(document.getElementById("pano"), svOpts);
También puedes definir la ubicación y el punto de vista mediante el método setLocationAndPOV() después de construir el objeto GStreetviewPanorama. En el siguiente ejemplo, creamos un objeto GStreetviewPanorama y definimos su ubicación y punto de vista con un valor específico.
var myPano = new GStreetviewPanorama(document.getElementById("pano"));
fenwayPark = new GLatLng(42.345573,-71.098326);
myPOV = {yaw:370.64659986187695,pitch:-20};
myPano.setLocationAndPOV(fenwayPark, myPOV);
Ver ejemplo (streetview-object.html)
La manera más sencilla de determinar si una carretera admite Street View es mediante el objeto GStreetviewOverlay. Basta con crear una superposición de este tipo y añadirla al mapa. Las carreteras que contienen datos de Street View se mostrarán destacadas en el mapa mediante un contorno azul.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
svOverlay = new GStreetviewOverlay();
map.addOverlay(svOverlay);
Ver ejemplo (streetview-layer.html)
Si sabes que una zona geográfica admite Street View, puedes añadir lógica que responda a clics en carreteras de Street View válidas poblando el objeto GStreetviewPanorama.
var myPano = new GStreetviewPanorama(document.getElementById("pano"));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.345573,-71.098326), 14);
svOverlay = new GStreetviewOverlay();
map.addOverlay(svOverlay);
GEvent.addListener(map,"click", function(overlay,latlng) {
myPano.setLocationAndPOV(latlng);
});
Ver ejemplo (streetview-click.html)
Si sabes que una ubicación concreta admite Street View, puedes guardar la información de la ubicación y el punto de vista y colocar esa información dentro del propio objeto.
No siempre es posible o deseable desde la perspectiva del usuario determinar si una carretera admite Street View mediante la inspección visual de GStreetviewOverlay. Por ese motivo, el API ofrece un servicio que permite programar solicitudes para recuperar datos de Street View. Este servicio se ofrece mediante el uso del objeto GStreetviewClient.
El objeto GStreetviewClient lleva a cabo búsquedas de datos panorámicos mediante el servicio de Street View de Google. Dado que la búsqueda es asincrónica, los métodos de esta clase requieren funciones de devolución de llamada que se deben ejecutar al recibir los datos. Todas las devoluciones de llamada dadas transmiten null si no se devuelve ningún valor, de modo que deberás comprobar este caso dentro de tus funciones de devolución de llamada.
El método getNearestPanoramaLatLng() de GStreetviewClient recupera el objeto GLatLng de una imagen panorámica cercana de una ubicación determinada (se transmite a sí mismo como GLatLng).
Tanto getNearestPanorama() como getPanoramaById() recuperan objetos GStreetviewData, que almacenan metadatos sobrel objeto panorámico concreto. Estos datos se describen en la siguiente sección.
La estructura de un objeto GStreetviewData consta de tres propiedades: location, copyright (que contiene información sobre la imagen específica que se muestra) y links (que ofrece información sobre los objetos panorámicos adyacentes). La estructura de estas propiedades se describe a continuación:
# The location property uses the GStreetviewLocation object literal
location: {
latlng: GLatLng,
pov: {
yaw: String,
pitch: String,
zoom: String
},
description: String,
panoId: String
}
copyright: String
# The links property uses the GStreetviewLink object literal
links[]: {
yaw: String,
description: String,
panoId: String
}
(En la Referencia del API de Google Maps aparecen descripciones completas de los objetos GStreetviewLocation y GStreetviewLink literales).
Nota: the GStreetviewData.location property should not be confused with the window.location property. Si intentas extraer datos desde la propiedad location de este objeto, asegúrate de recibir realmente una respuesta del servidor de Street View (ver a continuación). De lo contrario, la propiedad location tendrá de forma predeterminada el valor de window.location y se producirá un comportamiento inesperado.
Si una solicitud a un objeto GStreetviewClient es correcta, pasará un objeto GLatLng o GStreetviewData a la función de devolución de llamada especificada. Dado que la recuperación de datos de Street View es asincrónica, es posible que el objeto del cliente no recupere los objetos de datos, por lo que el código no debe depender de que estos datos estén presentes. En lugar de ello, siempre se debe comprobar el valor code devuelto desde cualquier solicitud, ya que este valor siempre se devuelve. El siguiente fragmento de código ilustra este concepto.
panoClient = new GStreetviewClient();
panoClient.getPanoramaById(panoData.location.panoId, processReturnedData);
function processReturnedData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
// Code to actually process the GStreetviewData object is contained here
}
A continuación reproducimos una respuesta completa con una estructura GStreetviewData de ejemplo:
{
location: {
latlng: GLatLng("42.345566, -71.098354")
pov: {
yaw: "370.64659986187695"
pitch: "-20"
zoom: "1"
}
description: "Yawkey Way"
panoId: "-KNGDaZvSQjMqug7ISM_CA"
}
copyright: "© 2008 Google"
links:[ {
yaw: "0"
description: "Yawkey Way"
panoId: "S142iWXa_4Fi7L7d8HKhuQ"
},
{
yaw: "0"
description: "Yawkey Way"
panoId: "2vFI79AjOpHTAYJSCKquFg"
}
]
}
La siguiente aplicación de ejemplo muestra un objeto panorámico inicial, extrae su identificación, almacena el objeto panorámico vinculado en el objeto GStreetviewData devuelto y muestra el conjunto de datos asociado al objeto de Street View. Cada vez que el usuario hace clic en "Siguiente", se repite el proceso, con lo que el usuario puede desplazarse por un conjunto de objetos panorámicos adyacentes.
var map;
var myPano;
var panoClient;
var nextPanoId;
function initialize() {
var fenwayPark = new GLatLng(42.345573,-71.098326);
var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
panoClient = new GStreetviewClient();
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
GEvent.addListener(map, "click", function(overlay,latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
});
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(fenwayPark, showPanoData);
}
function showPanoData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
nextPanoId = panoData.links[[0[].panoId;
var displayString = [[
"Panorama ID: " + panoData.location.panoId,
"LatLng: " + panoData.location.latlng,
"Copyright: " + panoData.copyright,
"Description: " + panoData.location.description,
"Next Pano ID: " + panoData.links[[0[].panoId
[].join("
");
map.openInfoWindowHtml(panoData.location.latlng, displayString);
GLog.write('Viewer moved to' + panoData.location.latlng);
myPano.setLocationAndPOV(panoData.location.latlng);
}
function next() {
// Get the next panoId
// Note that this is not sophisticated. At the end of the block, it will get stuck
panoClient.getPanoramaById(nextPanoId, showPanoData);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
Ver ejemplo (streetview-data.html)
Actualmente, el API de Google Maps permite a los desarrolladores manipular una instancia de Google Earth (proporcionada a través de una instalación independiente de un complemento de Google Earth) dentro de sus aplicaciones del API de Google Maps. La capa de mapa de Google Earth aparece a través de un objeto GMapType independiente similar en aspecto y comportamiento a la aplicación de Google Earth independiente, lo que te permite rotar perspectivas, ver elevaciones y consultar la información KML de Google Earth dentro del navegador.
Nota: the Google Earth Plug-in must be installed on the user's computer to use this Google Earth GMapType. Actualmente, este complemento sólo está disponible para Microsoft Windows. Para ver los requisitos completos del sistema, consulta la Guía del desarrollador del API de Google Earth.
El complemento de Google Earth para Windows está disponible en la siguiente dirección URL:
http://dl.google.com/earth/plugin/GoogleEarthPluginSetup_en.exe
El complemento de Google Earth se puede controlar a través de su propia API, que es independiente y distinta al API de Google Maps. Consulta la Guía del desarrollador del API de Google Earth para obtener más información sobre cómo utilizar el complemento y el API de Google Earth.
También es posible crear instancias del complemento de Google Earth dentro del API de Google Maps.
Para agregar la instancia de Google Earth a tu mapa, añade G_SATELLITE_3D_MAP a tu mapa con GMap2.addmapType(). Puedes definir el mapa para que muestre este tipo de mapa directamente (a través de GMap2.setMapType()) o permitir que el usuario seleccione este tipo de mapa dentro de GMapTypeControl. (Para ello, deberás añadir un control de tipo de mapa a través de GMap2.addControl()).
El siguiente código añade el tipo de mapa G_SATELLITE_3D_MAP al mapa y, a continuación, define de forma explícita el mapa para mostrar el tipo de mapa de Google Earth dentro del mapa. (Ten en cuenta que la primera vez que hagas clic en este ejemplo, se te pedirá que instales el complemento de Google Earth).
var map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(640,480) } );
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
map.addMapType(G_SATELLITE_3D_MAP);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.setMapType(G_SATELLITE_3D_MAP);
Ver ejemplo (services-earth-plugin.html)
Si deseas añadir funciones de búsqueda local a tu sitio, puedes utilizar el API de búsqueda AJAX de Google para incrustar un control de búsqueda local en tu sitio. Este control es una subclase del objeto GControl y un buen ejemplo de creación de un control personalizado.
Antes de añadir este control a la aplicación API de Google Maps, deberás añadir la dirección URL del API de búsqueda AJAX de Google y proporcionar tu clave del API de Google Maps para utilizar el servicio. También deberás cargar las hojas de estilo del objeto de control, tal como se muestra a continuación:
// Load the Code
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABCDEF"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
type="text/javascript"></script>
// Load the Style Sheets
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
</style>
También puedes utilizar el cargador AJAX para cargar todos estos módulos a través del cargador común.
Una vez que hayas llevado a cabo estas tareas de preparación, la carga del propio control es relativamente sencilla:
// create your map
var map = new GMap2(document.getElementById("map_canvas"));
// create a local search control and add it to your map
var lsc = new google.maps.LocalSearch();
map.addControl(new google.maps.LocalSearch());
Ver ejemplo (control-localsearch.html)
Puedes consultar más información sobre el control de búsqueda local en la Referencia del API AJAX de Google para búsquedas.
El API de Google Maps admite los formatos de datos KML y GeoRSS para mostrar información geográfica. Estos formatos de datos se añaden a un mapa con el objeto GGeoXml, cuyo constructor toma la dirección URL de un archivo XML de acceso público. Los marcadores de ubicación de GGeoXml se muestran como objetos GMarker, mientras que las polilíneas y los polígonos de GGeoXml se muestran como polilíneas y polígonos del API de Google Maps API. Los elementos <GroundOverlay> de los archivos KML se muestran como elementos GGroundOverlay en el mapa.
Los objetos GGeoXml se añaden al mapa mediante el método addOverlay(). (Puedes eliminarlos del mapa mediante removeOverlay()). Se admiten archivos KML y XML de GeoRSS. Ten en cuenta que GGeoXml es un objeto modular dentro del API de Google Maps y no se carga completamente hasta que se utiliza por primera vez. En consecuencia, sólo se debe llamar a su constructor cuando la página se haya cargado completamente. Normalmente esto se logra llamando al constructor GGeoXml en el manipulador onload de <body>.
// The GGeoXml constructor takes a URL pointing to a KML or GeoRSS file.
// You add the GGeoXml object to the map as an overlay, and remove it as an overlay as well.
// The Maps API determines implicitly whether the file is a KML or GeoRSS file.
var map;
var geoXml;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geoXml = new GGeoXml("http://mapgadgets.googlepages.com/cta.kml");
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41.875696,-87.624207), 11);
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}
Ver ejemplo de GeoRSS (geoxml-rss.html)
Ver ejemplos de KML (geoxml-kml.html)
El API de Google Maps permite añadir tu información de tráfico a tus mapas mediante el objeto GTrafficOverlay, que implementa la interfaz GOverlay. Para añadir la información de tráfico a tu mapa, utiliza el método GMap2.addOverlay(). GTrafficOverlay tiene dos métodos (hide() y show()) para cambiar la visualización de la superposición del tráfico. La información de tráfico sólo se muestra para las ciudades que lo admiten.
Opcionalmente, puedes transmitir opciones al constructor de GTrafficOverlay a través del objeto GTrafficOverlayOptions literal.
// The GTrafficOverlay is unique in that only one object of that type
// should be added to a map. Adding multiple traffic overlays produces
// no added benefit.
var map;
var trafficInfo;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}
Ver ejemplo de tráfico (trafficOverlay.html)
Puedes añadir la posibilidad de calcular rutas (a través de diversos métodos de transporte) con el objeto GDirections. El objeto GDirections solicita y recibe resultados de rutas mediante cadenas de consultas (por ejemplo, "Nueva York, NY a Chicago, IL") o latitudes y longitudes textuales (por ejemplo, "40.712882, -73.967257 a 41.943181, -87.770677"). El objeto GDirections también admite rutas segmentadas mediante una serie de hitos. Las rutas pueden aparecer como una polilínea que dibuje la ruta en un mapa, como una serie de descripciones dentro de un elemento <div> (por ejemplo, "Gire a la derecha en la elevación del puente Williamsburg") o como ambas.
Para utilizar rutas en el API de Google Maps, crea un objeto de tipo GDirections y designa un objeto GMap2 o <div>para recibir y mostrar los resultados. De forma predeterminada, el mapa está centrado y limitado por la ruta devuelta (aunque puedes modificar este comportamiento con los parámetros de un objeto GDirectionOptions).
Las rutas se solicitan mediante el método GDirections.load(). Este método requiere una cadena de consulta y un conjunto de parámetros opcionales de GDirectionsOptions. Se encuentran disponibles las siguientes opciones de
locale especifica el idioma que se debe utilizar para devolver los resultados, anulando el parámetro hl del API de Google, si se ha proporcionado. Si no se especifica ni el parámetro locale ni hl, se utilizará el idioma predeterminado del navegador.travelMode especifica el método de transporte que se va a utilizar al calcular los resultados.avoidHighways especifica que se deben evitar las autopistas al calcular las rutas.getPolyline especifica que el objeto de rutas debe devolver datos de polilíneas para dibujar las rutas de regreso. De forma predeterminada, el objeto GDirections sólo devuelve datos de polilínea si hay un objeto de mapa que lo muestre. Si estableces este valor true y no proporcionas un mapa, deberás procesar los datos de las polilíneas directamente.getSteps especifica que el objeto de rutas debe devolver indicaciones textuales, aunque no se proporcione un panel <div> para visualizar las rutas. Si estableces este valor true y no proporcionas un panel, deberás procesar los datos de los pasos directamente.preserveViewport especifica que el mapa no se debe centrar ni ampliar automáticamente con respecto al cuadro delimitador de las rutas devueltas; en su lugar, el mapa permanecerá centrado con respecto a la ventana gráfica actual.De forma predeterminada, se asume que las rutas son instrucciones para llegar en coche, aunque puedes solicitar otros modos de viaje. Para ello, debes transmitir un objeto GTravelMode al ejecutar el método Directions.load(). A continuación se especifican los modos de viaje compatibles:
G_TRAVEL_MODE_DRIVING indica las instrucciones para llegar en coche estándar a través de la red de carreteras.G_TRAVEL_MODE_WALKING solicita instrucciones para llegar a pie a través de aceras y rutas peatonales (según disponibilidad).Nota: Walking directions may sometimes not include clear pedestrian paths, so walking directions are only supported if you have supplied a <div> in the GDirections constructor; this <div> is used to display a warning to the user in the returned turn-by-turn textual directions. Si no dispones de un objeto <div>, la solicitud de instrucciones para llegar a pie devolverá un error.
Si el objeto GDirections se ha construido con un objeto GMap2 proporcionado, la ruta devuelta contendrá una superposición de polilínea. Si el objeto GDirections se creó con un elemento <div> proporcionado, las rutas devueltas contendrán un objeto GRoute, que contendrá a su vez un conjunto de objetos GStep. (Si la ruta consta de indicaciones en varios puntos, la ruta devuelta contendrá varios objetos GRoute, cada uno de los cuales incluirá una serie de objetos GStep).
Ten en cuenta que esta información devuelta no se añade al objeto de ruta de inmediato. Por este motivo, el objeto GDirections define un evento de carga que se puede interceptar para determinar el estado.
Una vez devueltas las rutas, el mapa mostrará, de forma predeterminada, una polilínea con la ruta y las indicaciones textuales aparecerán dentro del objeto <div> proporcionado para dicho fin. El objeto GDirections también almacenará internamente los resultados, que podrás recuperar mediante los métodos GDirections.getPolyline() o GDirections.getRoute(i:Number). Los pasos de una ruta se pueden recuperar mediante el método GRoute.getStep(i:Number) y el resumen HTML de cada paso se puede recuperar mediante GStep.getDescriptionHtml(). (Consulte Rutas y pasos a continuación).
El objeto GDirections también activa tres eventos que se pueden interceptar:
load": este evento se activa cuando un resultado de ruta se devuelve correctamente, pero antes de la adición de cualquier elemento de superposición al mapa/panel.addoverlay": este evento se activa después de que los componentes de ruta textuales o polilíneas se añadan al mapa o a los elementos DIV.error": este evento se activa si una solicitud de ruta da error. Se puede emplear GDirections.getStatus() al realizar llamadas para obtener más información sobre el error.
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
directionsPanel = document.getElementById("my_textual_div");
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
directions = new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
Ver ejemplo (directions-simple.html)
El siguiente ejemplo es idéntico al primero, salvo en que las rutas se ejecutan mediante la transmisión de un objeto G_TRAVEL_MODE_WALKING:
Ver ejemplo (directions-walking.html)
El objeto GDirections también admite rutas de varios puntos, que se pueden construir mediante el método GDirections.loadFromWaypoints(). Este método requiere una matriz de direcciones de entrada o puntos de latitud y longitud textuales. Cada hito se procesa como una ruta independiente y se devuelve en un objeto GRoute independiente, cada uno de los cuales consta de varios objetos GStep.
Los objetos GRoute almacenan el número de pasos (de tipo GStep) para la ruta, el código geográfico de inicio y fin de la ruta y otros datos procesados, como la distancia, la duración y la latitud y longitud exacta del punto final de la ruta (que puede ser distinto del código geográfico existente si el código no se encuentra en un segmento de carretera). Cada objeto GStep también contiene la descripción del texto (por ejemplo: "Incorporación a US-101 S desde la salida a San José"), así como información procesada que incluye la distancia, la duración y los valores exactos de latitud y longitud.
Para consultar la documentación completa sobre los distintos objetos, métodos y eventos del paquete de rutas de el API, consulta las Referencias para el API de Google Maps.