Este documento explica cómo incluir un mapa de Google personalizado en una página web en 5 minutos sin necesidad de programación. Se detallan los pasos a seguir: 1) Entrar en maps.google.com, 2) Crear un nuevo mapa, 3) Autenticarse con una cuenta de Google, 4) Personalizar el mapa agregando marcas y líneas, 5) Copiar el código HTML incrustado para pegarlo en la página web.
Este documento lista y describe varios servicios web y APIs de Google, incluyendo APIs de datos de Google, la API de Blogger, APIs de FeedBurner, Feeds Atom de Gmail, la autenticación de cuentas de Google, la API de Google AdSense, APIs AJAX de Google, la API AJAX de Google para feeds, la API AJAX de Google Search, Google Analytics, APIs de Google Apps, la API de Google Chart, Google Mashup Editor, la API de Google Maps, la API de datos del Bloc de notas de Google, Feeds de Google Noticias, APIs de Google Search Appliance, la API de
Este documento contiene resúmenes de varias actividades de programación en Android realizadas por un estudiante. Las actividades incluyen crear aplicaciones simples con botones, texto y colores cambiantes, e introducir elementos como imágenes y diferentes tipos de layouts como LinearLayout y RelativeLayout. El estudiante concluye que las actividades son útiles para familiarizarse con los conceptos y herramientas básicas de desarrollo en Android.
Este documento contiene el portafolio de Carlos Vladimir Delgadillo Osuna de la clase de Aplicaciones Móviles. Incluye código y descripciones de 5 actividades sobre diseño de interfaces en Android usando diferentes tipos de layouts como LinearLayout, RelativeLayout y ConstraintLayout. También incluye detalles sobre el desarrollo de una calculadora básica y una aplicación para determinar si un número es par o impar.
Este documento proporciona una guía sobre cómo crear una aplicación Android básica. Explica las partes clave de un proyecto Android como el archivo AndroidManifest.xml, activities, layouts y recursos. También cubre cómo programar la lógica de la aplicación en Java y manejar múltiples pantallas. Finalmente, brinda información sobre cómo publicar la aplicación en la Google Play Store.
Grails: Framework para el desarrollo de aplicaciones Web No 3Esteban Saavedra
El documento describe cómo personalizar la apariencia de una aplicación web creada con Grails. Se explica cómo crear fragmentos de código como un footer y topbar y agregarlos a la plantilla principal mediante tags. También se detalla cómo crear una hoja de estilos para dar formato a estas secciones y al resto de la aplicación, logrando así una interfaz personalizada. Finalmente, se modifica la página de inicio para reemplazar el contenido predeterminado.
Este documento describe cómo utilizar la API de Google Maps para desarrollar aplicaciones web. Explica qué es la API de Google Maps, cómo cargarla en una página web mediante etiquetas JavaScript, y los diferentes atributos y controles que permite agregar a los mapas, como el tipo de mapa, controles de zoom y escala. También proporciona enlaces a documentación y ejemplos adicionales sobre el uso de la API.
Este documento explica cómo incluir un mapa de Google personalizado en una página web en 5 minutos sin necesidad de programación. Se detallan los pasos a seguir: 1) Entrar en maps.google.com, 2) Crear un nuevo mapa, 3) Autenticarse con una cuenta de Google, 4) Personalizar el mapa agregando marcas y líneas, 5) Copiar el código HTML incrustado para pegarlo en la página web.
Este documento lista y describe varios servicios web y APIs de Google, incluyendo APIs de datos de Google, la API de Blogger, APIs de FeedBurner, Feeds Atom de Gmail, la autenticación de cuentas de Google, la API de Google AdSense, APIs AJAX de Google, la API AJAX de Google para feeds, la API AJAX de Google Search, Google Analytics, APIs de Google Apps, la API de Google Chart, Google Mashup Editor, la API de Google Maps, la API de datos del Bloc de notas de Google, Feeds de Google Noticias, APIs de Google Search Appliance, la API de
Este documento contiene resúmenes de varias actividades de programación en Android realizadas por un estudiante. Las actividades incluyen crear aplicaciones simples con botones, texto y colores cambiantes, e introducir elementos como imágenes y diferentes tipos de layouts como LinearLayout y RelativeLayout. El estudiante concluye que las actividades son útiles para familiarizarse con los conceptos y herramientas básicas de desarrollo en Android.
Este documento contiene el portafolio de Carlos Vladimir Delgadillo Osuna de la clase de Aplicaciones Móviles. Incluye código y descripciones de 5 actividades sobre diseño de interfaces en Android usando diferentes tipos de layouts como LinearLayout, RelativeLayout y ConstraintLayout. También incluye detalles sobre el desarrollo de una calculadora básica y una aplicación para determinar si un número es par o impar.
Este documento proporciona una guía sobre cómo crear una aplicación Android básica. Explica las partes clave de un proyecto Android como el archivo AndroidManifest.xml, activities, layouts y recursos. También cubre cómo programar la lógica de la aplicación en Java y manejar múltiples pantallas. Finalmente, brinda información sobre cómo publicar la aplicación en la Google Play Store.
Grails: Framework para el desarrollo de aplicaciones Web No 3Esteban Saavedra
El documento describe cómo personalizar la apariencia de una aplicación web creada con Grails. Se explica cómo crear fragmentos de código como un footer y topbar y agregarlos a la plantilla principal mediante tags. También se detalla cómo crear una hoja de estilos para dar formato a estas secciones y al resto de la aplicación, logrando así una interfaz personalizada. Finalmente, se modifica la página de inicio para reemplazar el contenido predeterminado.
Este documento describe cómo utilizar la API de Google Maps para desarrollar aplicaciones web. Explica qué es la API de Google Maps, cómo cargarla en una página web mediante etiquetas JavaScript, y los diferentes atributos y controles que permite agregar a los mapas, como el tipo de mapa, controles de zoom y escala. También proporciona enlaces a documentación y ejemplos adicionales sobre el uso de la API.
Este documento introduce los Mapplets de Google, que son aplicaciones que presentan y manipulan contenido geográfico a través de un acceso parcial al API de Mapas de Google. Explica qué son los Mapplets, sus ventajas y desventajas frente a Google Maps, los requisitos para su desarrollo, cómo está estructurado un Mapplet, las herramientas para su desarrollo y cómo desarrollar un Mapplet básico.
Este documento describe cómo agregar mapas de Google a una aplicación Android. Explica cómo obtener una huella digital y una clave API de Google Maps, crear un proyecto de Android que herede de MapActivity, agregar un MapView al layout XML, agregar capas personalizadas al mapa y detectar la ubicación del usuario.
Este documento describe los servicios web y su implementación en diferentes lenguajes de programación como PHP, Perl, Java y las APIs de Google. Explica cómo crear un servidor y cliente XML-RPC en PHP, un servicio web simple "Hola Mundo" en Perl, cómo definir y consumir un servicio web de validación de tarjetas de crédito en Java, y lista las diferentes APIs que Google ofrece para desarrolladores.
Appcircus Academy: Integración de Social Media en AndroidAlberto Ruibal
Este documento describe cómo integrar redes sociales como Twitter, LinkedIn, Google+ y Facebook en aplicaciones Android. Explica los pasos para obtener claves de API, autenticar usuarios, realizar llamadas a las API y mostrar datos de las redes sociales como actualizaciones y perfiles de usuario. También cubre temas como mejorar anuncios con datos de usuarios y usar redes sociales para inicios de sesión y compartir contenido.
Este documento describe los controles básicos de Android Studio como EditText, Button y TextView. Explica cómo crear una interfaz de usuario con estos controles y cómo implementar la lógica para pasar datos entre actividades usando Intents. También cubre cómo crear y usar dispositivos virtuales de Android para probar aplicaciones.
Este documento proporciona instrucciones para configurar y aplicar Google Maps para Rails. Explica cómo instalar el gema gmaps4rails, agregar etiquetas en los layouts y vistas, configurar el modelo para almacenar datos de ubicación, y mostrar un mapa usando gmaps4rails.
Este documento describe una aplicación móvil para el turismo en Cuenca. La aplicación permite registrar vehículos y sus propietarios, visualizar rutas turísticas en la ciudad usando Google Maps, solicitar guías turísticos basados en la capacidad de los vehículos registrados, y contactar a los propietarios. Usa Android Studio, SQLite para almacenar datos, y las APIs de Google Maps y Directions para mostrar las rutas.
Este documento proporciona una introducción a Google App Engine (GAE), una plataforma como servicio (PaaS) que permite alojar aplicaciones web escalables. Explica cómo crear aplicaciones web en GAE utilizando Python y Java, incluyendo cómo configurar el entorno de desarrollo, acceder a servicios como el almacenamiento de datos y memcache, y desplegar aplicaciones en la nube de Google. También proporciona un ejemplo paso a paso de cómo crear una aplicación web simple en GAE utilizando Java.
Grails: Framework para el desarrollo de aplicaciones Web No 6Esteban Saavedra
Este documento resume los principales temas de la última parte del tutorial de desarrollo web con Grails, incluyendo paginación, búsquedas, manejo de feeds y despliegue. Explica cómo Grails facilita la paginación de largas listas mediante el uso de parámetros en tags. También cubre el uso de plugins para habilitar funciones de búsqueda avanzadas y la generación de feeds RSS. Finalmente, describe brevemente el proceso de empaquetar la aplicación en un archivo WAR para su despliegue.
La aplicación móvil CTParking permite a los usuarios visualizar las áreas de estacionamiento tarifado dentro de Cuenca mediante el uso de GPS y Google Maps. Fue desarrollada con Android Studio usando una base de datos SQLite para almacenar las direcciones de los parqueaderos. La app tiene tres capas (datos, lógica y presentación) y utiliza APIs de Google Maps para indicar direcciones y ubicaciones. El proyecto ayudó al estudiante a aprender sobre programación móvil, bases de datos y el desarrollo de aplicaciones con capas
Este documento proporciona instrucciones para crear 20 aplicaciones móviles diferentes en Android, incluyendo apps Hola Mundo, tabla de multiplicar, cambiar fondo de pantalla, calculadora básica, reproductor de video y más. Explica los conceptos básicos de Android como actividades, layouts, widgets y más.
El documento describe que JavaScript tiene un objeto Image asociado a cada imagen HTML y una matriz images que contiene todas las imágenes. Estos objetos se encuentran dentro del objeto document, que a su vez está dentro del objeto window. Esto permite acceder directamente a las propiedades de una imagen mediante document.nombreImagen.propiedad o document.images[índice].propiedad.
Este documento proporciona una introducción a Google App Engine, incluyendo cómo instalar las herramientas necesarias, crear una cuenta de usuario, desarrollar una primera aplicación "Hola Mundo" y desplegarla en la nube de Google App Engine. Explica conceptos como entidades de datos, servicios de autenticación de usuarios y despliegue de aplicaciones.
Este documento presenta el proyecto MoviFast, una aplicación móvil que tiene como objetivo facilitar la movilidad en taxi dentro de Cuenca. El proyecto usa la API de Google Maps para mostrar rutas óptimas, costos y tiempos de viaje. Se implementó con una arquitectura de capas y patrones como Factory Method y Singleton. El documento concluye recomendando mejoras como manejar datos de tráfico en tiempo real y ampliar opciones de transporte.
Este documento describe las aplicaciones ASP (Active Server Pages), una tecnología de Microsoft para crear páginas web dinámicas mediante scripts ejecutados en el servidor. Explica objetos integrados como Session y Application que permiten almacenar datos entre páginas y usuarios, y cómo conectar ASP a bases de datos SQL para realizar consultas. También advierte sobre los riesgos de inyección SQL si los datos de usuario no se sanitizan adecuadamente en las consultas.
Este documento presenta el código y pantallas de 7 prácticas realizadas para la materia de Diseño de Aplicaciones Móviles. La práctica 1 muestra un "Hola Mundo", la práctica 2 mejora este programa agregando un botón, la práctica 3 crea una lista simple, la práctica 4 mejora la lista agregando peso a los elementos, la práctica 5 cambia los colores de la lista, la práctica 6 agrega una imagen, y la práctica 7 mejora la imagen. El documento demuestra el pro
Este documento presenta el código y pantallas de 7 prácticas realizadas para una clase de diseño de aplicaciones móviles. Las prácticas incluyen "Hola Mundo", creación de listas, agregar imágenes y usar layouts relativos. El estudiante describe cada práctica y analiza los desafíos encontrados al implementar el código.
El documento describe una aplicación móvil para encontrar parqueaderos disponibles cerca del usuario. La aplicación permitiría a los usuarios registrar parqueaderos y ver parqueaderos cercanos y disponibles. La aplicación usaría la base de datos SQLite, la API de Google Maps y se desarrollaría usando el lenguaje Java en Android Studio.
Más contenido relacionado
Similar a SIBW - TAC - Trabajo - Daniel Díaz Salas
Este documento introduce los Mapplets de Google, que son aplicaciones que presentan y manipulan contenido geográfico a través de un acceso parcial al API de Mapas de Google. Explica qué son los Mapplets, sus ventajas y desventajas frente a Google Maps, los requisitos para su desarrollo, cómo está estructurado un Mapplet, las herramientas para su desarrollo y cómo desarrollar un Mapplet básico.
Este documento describe cómo agregar mapas de Google a una aplicación Android. Explica cómo obtener una huella digital y una clave API de Google Maps, crear un proyecto de Android que herede de MapActivity, agregar un MapView al layout XML, agregar capas personalizadas al mapa y detectar la ubicación del usuario.
Este documento describe los servicios web y su implementación en diferentes lenguajes de programación como PHP, Perl, Java y las APIs de Google. Explica cómo crear un servidor y cliente XML-RPC en PHP, un servicio web simple "Hola Mundo" en Perl, cómo definir y consumir un servicio web de validación de tarjetas de crédito en Java, y lista las diferentes APIs que Google ofrece para desarrolladores.
Appcircus Academy: Integración de Social Media en AndroidAlberto Ruibal
Este documento describe cómo integrar redes sociales como Twitter, LinkedIn, Google+ y Facebook en aplicaciones Android. Explica los pasos para obtener claves de API, autenticar usuarios, realizar llamadas a las API y mostrar datos de las redes sociales como actualizaciones y perfiles de usuario. También cubre temas como mejorar anuncios con datos de usuarios y usar redes sociales para inicios de sesión y compartir contenido.
Este documento describe los controles básicos de Android Studio como EditText, Button y TextView. Explica cómo crear una interfaz de usuario con estos controles y cómo implementar la lógica para pasar datos entre actividades usando Intents. También cubre cómo crear y usar dispositivos virtuales de Android para probar aplicaciones.
Este documento proporciona instrucciones para configurar y aplicar Google Maps para Rails. Explica cómo instalar el gema gmaps4rails, agregar etiquetas en los layouts y vistas, configurar el modelo para almacenar datos de ubicación, y mostrar un mapa usando gmaps4rails.
Este documento describe una aplicación móvil para el turismo en Cuenca. La aplicación permite registrar vehículos y sus propietarios, visualizar rutas turísticas en la ciudad usando Google Maps, solicitar guías turísticos basados en la capacidad de los vehículos registrados, y contactar a los propietarios. Usa Android Studio, SQLite para almacenar datos, y las APIs de Google Maps y Directions para mostrar las rutas.
Este documento proporciona una introducción a Google App Engine (GAE), una plataforma como servicio (PaaS) que permite alojar aplicaciones web escalables. Explica cómo crear aplicaciones web en GAE utilizando Python y Java, incluyendo cómo configurar el entorno de desarrollo, acceder a servicios como el almacenamiento de datos y memcache, y desplegar aplicaciones en la nube de Google. También proporciona un ejemplo paso a paso de cómo crear una aplicación web simple en GAE utilizando Java.
Grails: Framework para el desarrollo de aplicaciones Web No 6Esteban Saavedra
Este documento resume los principales temas de la última parte del tutorial de desarrollo web con Grails, incluyendo paginación, búsquedas, manejo de feeds y despliegue. Explica cómo Grails facilita la paginación de largas listas mediante el uso de parámetros en tags. También cubre el uso de plugins para habilitar funciones de búsqueda avanzadas y la generación de feeds RSS. Finalmente, describe brevemente el proceso de empaquetar la aplicación en un archivo WAR para su despliegue.
La aplicación móvil CTParking permite a los usuarios visualizar las áreas de estacionamiento tarifado dentro de Cuenca mediante el uso de GPS y Google Maps. Fue desarrollada con Android Studio usando una base de datos SQLite para almacenar las direcciones de los parqueaderos. La app tiene tres capas (datos, lógica y presentación) y utiliza APIs de Google Maps para indicar direcciones y ubicaciones. El proyecto ayudó al estudiante a aprender sobre programación móvil, bases de datos y el desarrollo de aplicaciones con capas
Este documento proporciona instrucciones para crear 20 aplicaciones móviles diferentes en Android, incluyendo apps Hola Mundo, tabla de multiplicar, cambiar fondo de pantalla, calculadora básica, reproductor de video y más. Explica los conceptos básicos de Android como actividades, layouts, widgets y más.
El documento describe que JavaScript tiene un objeto Image asociado a cada imagen HTML y una matriz images que contiene todas las imágenes. Estos objetos se encuentran dentro del objeto document, que a su vez está dentro del objeto window. Esto permite acceder directamente a las propiedades de una imagen mediante document.nombreImagen.propiedad o document.images[índice].propiedad.
Este documento proporciona una introducción a Google App Engine, incluyendo cómo instalar las herramientas necesarias, crear una cuenta de usuario, desarrollar una primera aplicación "Hola Mundo" y desplegarla en la nube de Google App Engine. Explica conceptos como entidades de datos, servicios de autenticación de usuarios y despliegue de aplicaciones.
Este documento presenta el proyecto MoviFast, una aplicación móvil que tiene como objetivo facilitar la movilidad en taxi dentro de Cuenca. El proyecto usa la API de Google Maps para mostrar rutas óptimas, costos y tiempos de viaje. Se implementó con una arquitectura de capas y patrones como Factory Method y Singleton. El documento concluye recomendando mejoras como manejar datos de tráfico en tiempo real y ampliar opciones de transporte.
Este documento describe las aplicaciones ASP (Active Server Pages), una tecnología de Microsoft para crear páginas web dinámicas mediante scripts ejecutados en el servidor. Explica objetos integrados como Session y Application que permiten almacenar datos entre páginas y usuarios, y cómo conectar ASP a bases de datos SQL para realizar consultas. También advierte sobre los riesgos de inyección SQL si los datos de usuario no se sanitizan adecuadamente en las consultas.
Este documento presenta el código y pantallas de 7 prácticas realizadas para la materia de Diseño de Aplicaciones Móviles. La práctica 1 muestra un "Hola Mundo", la práctica 2 mejora este programa agregando un botón, la práctica 3 crea una lista simple, la práctica 4 mejora la lista agregando peso a los elementos, la práctica 5 cambia los colores de la lista, la práctica 6 agrega una imagen, y la práctica 7 mejora la imagen. El documento demuestra el pro
Este documento presenta el código y pantallas de 7 prácticas realizadas para una clase de diseño de aplicaciones móviles. Las prácticas incluyen "Hola Mundo", creación de listas, agregar imágenes y usar layouts relativos. El estudiante describe cada práctica y analiza los desafíos encontrados al implementar el código.
El documento describe una aplicación móvil para encontrar parqueaderos disponibles cerca del usuario. La aplicación permitiría a los usuarios registrar parqueaderos y ver parqueaderos cercanos y disponibles. La aplicación usaría la base de datos SQLite, la API de Google Maps y se desarrollaría usando el lenguaje Java en Android Studio.
Similar a SIBW - TAC - Trabajo - Daniel Díaz Salas (20)
1. API DE GOOGLE MAPS
Daniel Díaz Salas
Introducción
Este trabajo trata sobre la API de Google Maps, de su relación con los Sistemas de Información Basados en
Web, y de cómo empezar a usarla, para que cualquiera que lea este documento pueda empezar a
desarrollar sus aplicaciones.
Google Maps y los Sistemas de Información Basados en Web
La relación que tiene Google Maps con los SIBW es obvia. Cualquier cosa que sea susceptible de ser
representada en un mapa podrá usarse en esta API. Lo cual nos hace recordar una propiedad que se
estudiaba en las clases de física: todo objeto ocupa un lugar en el espacio. ¿Y qué hace un mapa sino
representar el lugar que ocupan los objetos en el espacio?
Es pues bastante obvio pensar que se puede representar cualquier cosa que no sea abstracta con esta API.
Ya nos podemos imaginar el potencial que podemos sacar con esta herramienta.
La API de Google Maps
Esta API va dirigida a programadores con experiencia en JavaScript y programación orientada a objetos,
que también estén familiarizados con Google Maps desde el punto de vista del usuario.
Primer paso: obtener una clave
Todas las aplicaciones del API de Google Maps deben cargar el API de Google Maps mediante una clave
de API. Utilizar una clave de API permite controlar cómo utiliza la aplicación el API de Google Maps y
asegurarnos de que Google puede ponerse en contacto con el desarrollador con respecto a la aplicación si
fuese necesario.
Para crear una clave hay que seguir 4 pasos:
1. Acceded a la página de la consola de las API (https://code.google.com/apis/console) e iniciar sesión con
una cuenta de Google
2. Hacer clic en el enlace de servicios en el menú de la izquierda.
3. Activar el servicio de la versión 3 del API de Google Maps.
4. Hacer clic en el enlace de acceso al API en el menú de la izquierda. la clave de API está disponible
desde la página de acceso al API, en la sección de acceso al API sencilla. Las aplicaciones del API de
Google Maps utilizan la clave para aplicaciones del navegador.
Segundo paso: Hola Mundo de Google Maps
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 Sídney, 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: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
2. src="http://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Hay algunas cosas que se deben de tener en cuenta sobre este código:
1. Declaramos la aplicación como HTML5 mediante la declaración <!DOCTYPE html>.
2. Incluimos el código JavaScript del API de Google Maps mediante la etiqueta script.
3. Creamos un elemento div denominado "map_canvas" que aloja el mapa.
4. Creamos un objeto JavaScript literal para alojar una serie de propiedades de mapa.
5. Escribimos una función JavaScript para crear un objeto de mapa.
6. Inicializamos el objeto de mapa desde el evento onload de la etiqueta body
Estas 6 cosas se han de tener en cuenta siempre que trabajemos con la API de Google Maps. Por ello, se
explican con más detalle:
Cómo declarar tu aplicación como HTML5
Se recomienda que se declare un DOCTYPE verdadero en la aplicación web. En los ejemplos se han
declarado las 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 la 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.
Hay que tener 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, hay que incluir la siguiente declaración <style>:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
3. 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. Hay que tener en cuenta que se debe declarar de forma
específica estos porcentajes tanto para <body> como para <html>.
Cómo cargar el API de Google Maps
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
La URL incluida en la etiqueta script indica 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. La etiqueta script es
obligatoria.
El parámetro key incluye la clave de API de la aplicación.
El parámetro sensor de la URL es obligatorio e indica si esta aplicación utiliza un sensor (por ejemplo, un
localizador GPS) para determinar la ubicación del usuario. En este ejemplo se ha dejado el parámetro como
la variable set_to_true_or_false para hacer hincapié en que se debe definir este valor en true o false de
forma explícita.
HTTPS
Si la aplicación es una aplicación HTTPS, es posible que se quiera cargar el API de JavaScript de Google
Maps a través de HTTPS:
<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>
El uso del protocolo HTTPS para cargar el API de Google Maps es necesario en las aplicaciones SSL para
evitar que aparezcan advertencias de seguridad en la mayoría de los navegadores, y se recomienda para
las aplicaciones que incluyen datos importantes de los usuarios en las solicitudes (por ejemplo, su
ubicación).
Cómo cargar el API de forma asíncrona
Se recomienda que se cargue el código JavaScript del API de Google Maps después de que la página haya
terminado de cargarse o en el momento. Para ello, se puede insertar una etiqueta propia <script> en
respuesta a un evento window.onload o a una llamada de función. No obstante, también se debe indicar a la
secuencia de comandos de inicialización del API de JavaScript de Google Maps que retrase la ejecución del
código de la aplicación hasta que el código del API de JavaScript de Google Maps se haya cargado por
completo. Para ello, se puede utilizar el parámetro callback, que utiliza como argumento la función que se
debe ejecutar cuando finaliza la carga del API.
A continuación se muestra un fragmento de código que permite que la aplicación cargue el API de Google
Maps una vez que se haya cargado por completo la página (mediante window.onload) y que se incluya el
API de JavaScript de Google Maps en una etiqueta <script> dentro de la página. También se puede hacer
que el API no ejecute la función initialize() hasta que se haya cargado por completo incluyendo
callback=initialize en la secuencia de comandos de inicialización del API de Google Maps:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
4. function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Elementos DOM de mapas
Para que el mapa aparezca en una página web, se debe reservar un lugar para él. Normalmente, se hace
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.
<div id="map_canvas" style="width: 100%; height: 100%"></div>
En el ejemplo anterior, se ha definido un objeto <div> denominado "map_canvas" y se ha establecido su
tamaño mediante atributos de estilo. Hay que tener 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. Hay que tener 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 mapas
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Antes de inicializar un mapa, hay que 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.
var mapOptions = {};
Latitudes y longitudes
Como queremos center el mapa en un punto específico, creamos un objeto LatLng para mantener esta
ubicación especificando las coordenadas de ubicación en el orden {latitud, longitud}:
center = new google.maps.LatLng(-34.397, 150.644)
El proceso de convertir una dirección en un punto geográfico se conoce como codificación geográfica, el
cual se describirá más adelante.
Niveles de zoom
La propiedad zoom especifica la resolución inicial con la que se mostrará un mapa, donde un zoom de 0 se
corresponde con un mapa de la Tierra totalmente alejado y los niveles de zoom acercan el mapa con una
resolución más elevada.
zoom: 8
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
5. Tipos de mapas
También hay que establecer expresamente un tipo de mapa inicial en este momento.
mapTypeId: google.maps.MapTypeId.ROADMAP
Se admiten los siguientes tipos de mapas:
• ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.
• SATELLITE muestra imágenes de satélite.
• HYBRID 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 muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes
de agua (montañas, ríos, etc.).
El objeto “Map”
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
La clase de JavaScript que representa a los mapas es Map. Cada objeto de esta clase define un único
mapa en una página. Se crea una nueva instancia de esta clase mediante el operador new de JavaScript.
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 mapOptions literal. Estas opciones se utilizarán para
inicializar las propiedades del mapa.
Cómo cargar el 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 el
mapa se añada a la página cuando se cargue por completo, solo se ejecuta 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, se evita
un comportamiento impredecible y se obtiene 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
Codificación geográfica
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 proporciona una clase geocoder que permite codificar geográficamente las
direcciones de forma dinámica a partir de los datos introducidos por el usuario. Estas solicitudes son
limitadas para evitar un abuso del servicio.
Solicitudes de codificación geográfica
El acceso al servicio de asignación de identificadores geográficos tiene lugar de forma asíncrona, dado que
el API de Google Maps necesita realizar una llamada a un servidor externo. Por ese motivo, se debe incluir
un método de devolución de llamada para que se ejecute al completar la solicitud. Este método de
devolución de llamada procesará los resultados. Hay que tener en cuenta que el geocoder puede devolver
más de un resultado.
Hay que acceder al servicio de asignación de identificadores geográficos del API de Google Maps desde el
código a través del objeto google.maps.Geocoder. El método Geocoder.geocode() inicia la solicitud al
servicio de asignación de identificadores geográficos y transmite un objeto literal GeocodeRequest que
contiene los términos de entrada y un método de devolución de llamada que se ejecutará al recibir la
respuesta
6. El objeto literal GeocodeRequest contiene los siguientes campos:
{
address: string,
latLng: LatLng,
bounds: LatLngBounds,
region: string
}
• address (obligatorio): es la dirección que se quiere codificar de forma geográfica.
• latLng (obligatorio): es la latitud y la longitud (LatLng) para las que se quiere obtener la dirección
interpretable por humanos más cercana.
• bounds (opcional): son los límites de latitud y de longitud (LatLngBounds) dentro de los que se
quiere predeterminar los resultados de codificación geográfica con mayor importancia.
• region (opcional): es el código de región, especificado como una subetiqueta region del lenguaje
IANA. En la mayoría de los casos, estas etiquetas se asignan directamente a valores de dos
caracteres ccTLD ("dominio de nivel superior") ya conocidos.
Para la búsqueda se puedes incluir un campo address o un campo latLng (si se transmite un campo latLng,
el geocoder realizará el proceso conocido como codificación geográfica inversa
Respuestas de codificación geográfica
Para el servicio de asignación de identificadores geográficos se necesita un método de devolución de
llamada que se ejecute al recuperar los resultados del geocoder. Esta devolución de llamada debe transmitir
dos parámetros que alojen resultados (results) y un código de estado (status), en ese orden. Puesto que el
geocoder puede devolver más de una entrada, el objeto literal GeocoderResults es un conjunto.
Resultados de codificación geográfica
El objeto literal GeocoderResults representa un único resultado de codificación geográfica y presenta la
siguiente forma:
results[]: {
types[]: string,
formatted_address: string,
address_components[]: {
short_name: string,
long_name: string,
types[]: string
},
geometry: {
location: LatLng,
location_type: GeocoderLocationType
viewport: LatLngBounds,
bounds: LatLngBounds
}
}
Estos campos significan los siguiente:
• types[] es un conjunto que indica de qué tipo son los resultados obtenidos. Este conjunto incluye
una o más etiquetas que identifican el tipo de elemento que se ha obtenido en el resultado. Por
ejemplo, un código geográfico de "Chicago" devuelve "locality", lo que indica que "Chicago" es una
ciudad y además devuelve "political", lo que significa que es una entidad política.
7. • formatted_address es una cadena que contiene la dirección interpretable por humanos de la
ubicación. Esta dirección suele corresponder con la "dirección postal", que a veces difiere de un
país a otro. Esta suele estar formada por uno o varios componentes de la dirección. Por ejemplo, la
dirección "111 8th Avenue, New York, NY" contiene componentes independientes para "111 8th
Avenue" (una dirección postal), "New York" (la ciudad) y "NY" (el estado de EE.UU.).
• address_component[] es un conjunto que incluye los diferentes componentes de la dirección.
• geometry contiene la siguiente información:
◦ location contiene el valor de latitud y longitud codificado de forma geográfica. Hay que tener en
cuenta que este valor se devuelve como un objeto LatLng, no como una cadena con formato.
◦ location_type almacena datos adicionales sobre la ubicación especificada. Actualmente, se
admiten los siguientes valores:
▪ google.maps.GeocoderLocationType.ROOFTOP indica que el resultado obtenido refleja un
código geográfico preciso.
▪ google.maps.GeocoderLocationType.RANGE_INTERPOLATED indica que el resultado
obtenido refleja una aproximación (normalmente en una carretera) interpolada entre dos
puntos precisos (por ejemplo, intersecciones). Los resultados interpolados se suelen
obtener cuando los códigos geográficos de la parte superior no están disponibles para una
dirección postal.
▪ google.maps.GeocoderLocationType.GEOMETRIC_CENTER indica que el resultado
obtenido corresponde al centro geométrico de un resultado del tipo polilínea (por ejemplo,
una calle) o polígono (una región).
▪ google.maps.GeocoderLocationType.APPROXIMATE indica que el resultado obtenido es
aproximado.
◦ viewport almacena la ventana gráfica recomendada para el resultado obtenido.
◦ bounds (se devuelve de forma opcional) almacena los límites de latitud y de longitud
(LatLngBounds) que pueden contener por completo el resultado obtenido.
El geocoder devuelve las direcciones con la configuración de idioma preferida del navegador, o en el idioma
especificado al cargar el código JavaScript del API mediante el parámetro language.
Códigos de estado
El código status puede devolver uno de los siguientes valores:
• google.maps.GeocoderStatus.OK indica que la codificación geográfica se ha realizado
correctamente.
• google.maps.GeocoderStatus.ZERO_RESULTS indica que la codificación geográfica se ha
realizado correctamente pero no ha devuelto ningún resultado. Esto puede ocurrir si en la
codificación geográfica se incluye una dirección (address) inexistente o un valor latng en una
ubicación remota.
• google.maps.GeocoderStatus.OVER_QUERY_LIMIT indica que se ha excedido el cupo de
solicitudes.
• google.maps.GeocoderStatus.REQUEST_DENIED indica que se ha denegado la solicitud por algún
motivo.
• google.maps.GeocoderStatus.INVALID_REQUEST normalmente indica que no se ha especificado
la solicitud (address o latLng).
8. Bibliotecas
El código JavaScript del API de Google Maps se carga a través de una URL de inicialización con el formato
http://maps.googleapis.com/maps/api/js. Al enviar esta solicitud de inicialización, se cargan todos los
símbolos y los objetos JavaScript que se utilizarán en el API de Google Maps. Algunos recursos del API de
Google Maps también se encuentran disponibles a través de bibliotecas independientes que no se cargan a
menos que se soliciten explícitamente. La distribución de componentes complementarios en bibliotecas
permite que el API principal se cargue (y se analice) rápidamente, de forma que la única carga de trabajo
adicional que debe asumir el desarrollador es la de cargar y analizar las bibliotecas que pueda necesitar.
Para especificar las bibliotecas adicionales que se quiera cargar, hay que incluir un parámetro libraries con
el nombre de esas bibliotecas en la solicitud de inicialización. Si se necesita indicar varias bibliotecas, se
deben separar con comas. Una vez que se hayan cargado las bibliotecas, se podrá acceder a ellas a través
del espacio de nombre google.maps.libraryName.
A continuación se indican las bibliotecas que se encuentran disponibles actualmente:
• adsense: permite que la aplicación desarrollada con el API de Google Maps incluya anuncios de
texto contextuales para poder obtener ingresos con los anuncios mostrados a los usuarios.
• drawing: proporciona una interfaz gráfica que permite que los usuarios incluyan polígonos,
rectángulos, polilíneas, círculos y marcadores en el mapa.
• geometry: incluye funciones de utilidades para el cálculo de valores geométricos escalares (como la
distancia y el área) en la superficie terrestre.
• panoramio: contiene funciones que permiten añadir capas de fotos de Panoramio a las aplicaciones
creadas con el API de Google Maps.
• places: permite que una aplicación busque sitios como establecimientos, ubicaciones geográficas o
puntos de interés destacados dentro de un área definida.
• visualization: proporciona representaciones visuales de datos de mapa de calor e información
demográfica de Estados Unidos. Para obtener más información sobre mapas de calor, consulta la
documentación sobre mapas de calor.
• weather contiene funciones para añadir previsiones meteorológicas e imágenes de nubes al mapa.
En la siguiente solicitud de inicialización se muestra cómo solicitar la biblioteca google.maps.geometry del
API de JavaScript de Google Maps:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
libraries=geometry&sensor=true_or_false">
</script>
Si se quieren solicitar varias bibliotecas, hay que separarlas con comas:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
libraries=geometry,places&sensor=true_or_false">
</script>