Nota: la versión 3 de Google Maps JavaScript API que se menciona en estas páginas es ahora la versión oficial del API de JavaScript. La versión 2 de esta API se ha descartado oficialmente, de acuerdo con nuestra política de funciones obsoletas. Te animamos a que migres el código a esta nueva versión actualizada y mejorada.
Introducción
El elemento fundamental en cualquier aplicación del API de Google Maps v. 3 es el propio mapa. En este documento se explica el uso del objeto
google.maps.Map fundamental y los aspectos básicos de las operaciones de mapa. (Si ya has consultado el tutorial de la versión 2, este te resultará bastante parecido. No obstante, es importante que leas este documento, ya que existen algunas diferencias).El "Hello, World" de Google Maps v. 3
La manera más fácil de iniciar el aprendizaje del API de Google Maps es observar un sencillo ejemplo. La siguiente página web muestra un mapa centrado en Sydney, Nueva Gales del Sur, Australia:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
Incluso en este sencillo ejemplo, hay algunas cosas que se deben tener en cuenta:
- Declaramos la aplicación como HTML5 mediante la declaración
<!DOCTYPE html>. - Incluimos el código JavaScript del API de Google Maps mediante la etiqueta
script. - Creamos un elemento
divdenominado "map_canvas" que aloja el mapa. - Creamos un objeto JavaScript literal para alojar una serie de propiedades de mapa.
- Escribimos una función JavaScript para crear un objeto de mapa.
- Inicializamos el objeto de mapa desde el evento
onloadde la etiquetabody.
Estos pasos se explican a continuación.
Cómo declarar tu aplicación como HTML5
Te recomendamos que declares un
DOCTYPE verdadero en tu aplicación web. En los ejemplos que te mostramos aquí, hemos declarado nuestras aplicaciones como HTML5 mediante el sencillo DOCTYPE HTML5, tal y como se muestra a continuación:<!DOCTYPE html>
Los navegadores más habituales mostrarán contenido declarado con este
DOCTYPE en "modo estándar", lo que significa que tu aplicación deberá ser más compatible con los navegadores. El DOCTYPE también está diseñado para ajustarse de la mejor manera; así, los navegadores que no lo entiendan lo ignorarán y utilizarán el "modo chapucero" para mostrar el contenido.
Ten en cuenta que algunas de las CSS que funcionan en el modo chapucero no son válidas en el modo estándar. En concreto, todos los tamaños basados en porcentajes deben heredarse de los elementos de bloque principales, y si cualquiera de estos antecesores no puede especificar un tamaño, se supondrá un tamaño de 0 x 0 píxeles. Por esta razón, incluimos la siguiente declaración
<style>:<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style>
Esta declaración de CSS indica que el contenedor del mapa
<div> (denominado map_canvas) debe ocupar el 100% de la altura del cuerpo de HTML. Ten en cuenta que debemos declarar de forma específica estos porcentajes tanto para <body> como para <html>.Carga del API de Google Maps
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script>
La URL
http://maps.google.com/maps/api/js permite acceder a la ubicación de un archivo JavaScript que carga todos los símbolos y las definiciones que se necesitan para utilizar el API de Google Maps v. 3. La página debe contener una etiqueta scriptque dirija a esta URL.
La etiqueta
<meta> de este encabezado especifica que este mapa se debe mostrar en modo de pantalla completa y el usuario no debería ser capaz de modificar su tamaño. (Para obtener más información, consulta la sección Desarrollo de dispositivos móviles).
Ten en cuenta que también debemos establecer 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 la variable set_to_true_or_false para hacer hincapié en quese debe definir este valor en true o false de forma explícita.
Al cargar el API de JavaScript de Google Maps mediante la URL
http://maps.google.com/maps/api/js, tienes la opción de cargar bibliotecas adicionales utilizando el parámetro libraries. Las bibliotecas son módulos de código que proporcionan funciones adicionales al API de JavaScript, pero que no se cargan a menos que las solicites de forma específica. Para obtener más información, consulta la sección Bibliotecas en la versión 3 del API de Google Maps.
Si tu aplicación es una aplicación HTTPS, es posible que quieras cargar el API de JavaScript de Google Maps a través de HTTPS.
Elementos DOM de mapa
<div id="map_canvas" style="width: 100%; height: 100%"></div>
Para que el mapa se muestre en una página web, debemos reservar un lugar para él. Normalmente, lo hacemos mediante la creación de un elemento
div con nombre y la obtención de 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. Ten en cuenta que este tamaño se establece en "100%", lo que amplía el mapa hasta que ocupa toda la pantalla del dispositivo móvil. Es posible que sea necesario ajustar estos valores según el desplazamiento y el tamaño de la pantalla del navegador. Ten en cuenta que el mapa siempre adoptará el tamaño del elemento en el que esté contenido, por lo que siempre debes establecer un tamaño para el elemento <div> de forma explícita.Opciones de mapa
var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
Antes de inicializar un mapa, debemos crear un objeto
Map options que contenga las variables de inicialización correspondientes. Este objeto no se construye, sino que se crea como un objeto literal. Como queremos centrar el mapa en un punto específico, también debemos crear un valor latlng que aloje esta ubicación y la transmita a las opciones del mapa. Para obtener más información sobre cómo especificar distintas ubicaciones, consulta la sección Latitudes y longitudes a continuación.
También debemos establecer el nivel de zoom inicial y especificar
mapTypeId como valor de google.maps.MapTypeId.ROADMAP. Se admiten los siguientes tipos:ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.SATELLITE, que muestra imágenes de satélite.HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).
A diferencia del API de Google Maps v. 2, no existe ningún tipo de mapa predeterminado. Debes establecer de forma específica un tipo de mapa inicial para poder ver los mosaicos correspondientes.
Para obtener más información sobre los tipos de mapas, consulta la sección Tipos de mapas. Sin embargo, para la mayoría de los casos lo único que necesitas saber es cómo utilizar los tipos básicos descritos anteriormente.
google.maps.Map: el objeto elemental
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
La clase de JavaScript que representa a los mapas es
Map. 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 elemento HTML
<div> en la página como contenedor para el mapa. Los nodos HTML son elementos secundarios del objeto document de JavaScript. Se obtiene una referencia a este elemento mediante el métododocument.getElementById().
Este código permite definir una variable (denominada
map) y asignar dicha variable a un nuevo objeto Map, además de transmitir opciones definidas en el objeto myOptions literal. Estas opciones se utilizarán para inicializar las propiedades del mapa. A continuación se muestra la definición de la función Map(), conocida como constructor:| Constructor | Descripción |
|---|---|
| google.maps.Map(opts?) | Permite crear un nuevo mapa a partir de los parámetros opcionales transmitidos por el parámetro opts. |
Carga del mapa
<body onload="initialize()">
Mientras se procesa una página HTML, se crea el modelo de objetos de documentos (DOM) y las imágenes y secuencias de comandos externas se reciben y se incorporan al objeto
document. Para garantizar que nuestro mapa se añada a la página cuando se cargue por completo, solo ejecutamos la función que crea el objeto Map 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 del momento en que se dibuja el mapa.
El atributo
onload de la etiqueta body es un ejemplo de un controlador de eventos. El API de JavaScript de Google Maps también proporciona varios eventos que se pueden controlar para determinar cambios de estado. Para obtener más información, consultaEventos de mapa.Latitudes y longitudes
Necesitamos una manera de hacer referencia a ubicaciones del mapa. El objeto
google.maps.LatLng proporciona esta posibilidad dentro del API de Google Maps. Los objetos LatLng se construyen transmitiendo sus parámetros en el orden habitual {latitud, longitud}:var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)
Nota: el proceso de convertir una dirección en un punto geográfico se conoce como codificación geográfica. Esta versión del API de Google Maps incluye funciones de codificación geográfica. Para obtener más información, consulta Codificación geográfica en la sección de servicios.
Los objetos
LatLng tienen muchas aplicaciones en el API de Google Maps. Por ejemplo, el objeto google.maps.Marker utiliza un elemento LatLng en su constructor y coloca una superposición de marcador en la ubicación geográfica especificada del mapa.Niveles de zoom
Para ofrecer un mapa de todo el planeta como una única imagen, es necesario un mapa muy grande o un mapa pequeño con una resolución muy baja. Por consiguiente, las imágenes de mapa en Google Maps y el API de Google Maps se dividen en "mosaicos" de mapas y "niveles de zoom". A niveles bajos de zoom, un conjunto pequeño de mosaicos de mapas cubre una superficie amplia; a niveles de zoom más elevados, los mosaicos tienen una resolución mayor y cubren una superficie más pequeña.
Tú especificas la resolución con la que se mostrará un mapa al configurar la propiedad
zoom de Map, donde un zoom de 0 corresponde a un mapa de la Tierra totalmente alejado y los niveles mayores de zoom acercan el mapa con una resolución más elevada.
Las tres imágenes siguientes representan la misma ubicación de Tokio a niveles de zoom de 0,7 y 18.
Para obtener más información sobre la forma en que el API de Google Maps carga los mosaicos según el nivel de zoom, consulta la sección Coordenadas de mosaico en la documentación de los tipos de mapas.
Fuente: WWW.GOOGLE.COM
Fuente: WWW.GOOGLE.COM
No hay comentarios:
Publicar un comentario