SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Desarrollo de aplicaciones web 2.0 Gonzalo García G.
Agenda ¿Qué es el Api de Google Maps?. Trabajando con el Api de Google Maps. Cargando el Api de Google Maps. Atributos del Mapa. Controles Básicos de un Mapa. Api de Google Maps Ejemplos.
¿Qué es el Api de                ? Es un servidor de aplicaciones de mapas en Web. Ofrece imágenes de mapas desplazables. Nos permite insertar mapas en nuestras páginas web. http://maps.google.com Servicio gratuito. Parecido a Google Earth. Posee diferentes servicios que pueden ser utilizados La ruta mas corta
Trabajando con el Api de Debemos disponer de un KEY. http://code.google.com/intl/es/apis/maps/signup.html Necesita tener una cuenta de GMAIL. micuenta@gmail.com La URL donde se aloja nuestro aplicativo http://127.0.0.1.8988/GoogleMapsApp ABQIAAAA6ztTU_R6Fg4G5z_F3u6ARhT_GVpaUHXll3jKIaNe6cKcjekxixRJnNqWj4iDOCWTAbCTaAEzTgEaYQ
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAA6ztTU_R6Fg4G5z_F3u6ARhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSHhKsXphs70Fe97C9GoHnhLszwqg" type="text/javascript"> </script> Trabajando con el Api de
Cargando el Api de  Incluimos el código JavaScript del API de Google Maps mediante la etiqueta <script> Creamos un elemento <div id=‘map_canvas’> que aloja el mapa.  Escribimos una función JavaScript para crear un objeto de mapa initialize().  Centramos el mapa en un punto geográfico concreto.  Inicializamos el objeto de mapa desde el evento onLoad de la etiqueta <body>.
Cargando el Api de  <html>   <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>     <title>Google Maps Desarrollo de Aplicaciones Web 2.0</title>     <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA6ztTU_R6Fg4G5z_F3u6ARhT_GVpaUHXll3jKIaNe6cKcjekxixRJnNqWj4iDOCWTAbCTaAEzTgEaYQ" type="text/javascript">    </script>     <script type="text/javascript"> functioninitialize() { if (GBrowserIsCompatible()) { varmap = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(-2.204691, -79.889109), 15);       }     } </script>   </head>   <bodyonload="initialize()" onunload="GUnload()">     <div id="map_canvas" style="width: 500px; height: 300px"></div>   </body> </html>
Cargando el Api de
Atributos del Mapa Definidos mediante el método setMapType de GMap2 G_NORMAL_MAP: la vista predeterminada.  G_SATELLITE_MAP: imágenes de satélite de Google Earth.  G_HYBRID_MAP: mezcla de vistas normales y de satélite.  G_DEFAULT_MAP_TYPES: una mezcla de estos tres tipos, útil para un procesamiento repetitivo.
Controles Básicos de un Mapa GMapTypeControl Denota el tipo de Mapa: Híbrido, Satélite o Mapa GLargeMapControl Muestra un barra de desplazamiento para el zoom del mapa GScaleControl La escala del mapa GOverviewMapControl Muestra un mini-mapa en la esquina inferior derecha
Api de  Referencia WEB. http://code.google.com/intl/es/apis/maps/documentation/reference.html
Ejemplos

Weitere ähnliche Inhalte

Ähnlich wie Google Maps

Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
jvelizster
 
Ejemplo usando la APIs de google
Ejemplo usando la APIs de googleEjemplo usando la APIs de google
Ejemplo usando la APIs de google
Lilia Valles
 
Congreso visión 2012 - taller introducción app engine
Congreso visión 2012 - taller introducción app engineCongreso visión 2012 - taller introducción app engine
Congreso visión 2012 - taller introducción app engine
Nigeŗ Arce
 
Google maps by Jordan Diaz
Google maps by Jordan DiazGoogle maps by Jordan Diaz
Google maps by Jordan Diaz
Jordan Diaz
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
oswchavez
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
oswchavez
 
Appcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en AndroidAppcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en Android
Alberto Ruibal
 
Mi primera App con GAE
Mi primera App con GAEMi primera App con GAE
Mi primera App con GAE
GDG Lima
 

Ähnlich wie Google Maps (20)

Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
 
Desarrollo de Mi Primer Mapplet
Desarrollo de Mi Primer MappletDesarrollo de Mi Primer Mapplet
Desarrollo de Mi Primer Mapplet
 
Servicio web.lauraivettecolinvillarreal
Servicio web.lauraivettecolinvillarrealServicio web.lauraivettecolinvillarreal
Servicio web.lauraivettecolinvillarreal
 
Calculadora
CalculadoraCalculadora
Calculadora
 
Curso Cloud Computing, Parte 2: Google App Engine
Curso Cloud Computing, Parte 2: Google App EngineCurso Cloud Computing, Parte 2: Google App Engine
Curso Cloud Computing, Parte 2: Google App Engine
 
Usando Google Maps en tu Android App
Usando Google Maps en tu Android AppUsando Google Maps en tu Android App
Usando Google Maps en tu Android App
 
Ejemplo usando la APIs de google
Ejemplo usando la APIs de googleEjemplo usando la APIs de google
Ejemplo usando la APIs de google
 
Congreso visión 2012 - taller introducción app engine
Congreso visión 2012 - taller introducción app engineCongreso visión 2012 - taller introducción app engine
Congreso visión 2012 - taller introducción app engine
 
Google Analitycs para las webs de los campings
Google Analitycs para las webs de los campingsGoogle Analitycs para las webs de los campings
Google Analitycs para las webs de los campings
 
Google maps by Jordan Diaz
Google maps by Jordan DiazGoogle maps by Jordan Diaz
Google maps by Jordan Diaz
 
Tarea2.web 2.0
Tarea2.web 2.0Tarea2.web 2.0
Tarea2.web 2.0
 
Tarea2.web 2.0
Tarea2.web 2.0Tarea2.web 2.0
Tarea2.web 2.0
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascript
 
El analista que soñaba con Excel y el CTRL+ALT+SUPR
El analista que soñaba con Excel y el CTRL+ALT+SUPREl analista que soñaba con Excel y el CTRL+ALT+SUPR
El analista que soñaba con Excel y el CTRL+ALT+SUPR
 
gas.pdf
gas.pdfgas.pdf
gas.pdf
 
Appcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en AndroidAppcircus Academy: Integración de Social Media en Android
Appcircus Academy: Integración de Social Media en Android
 
Blog
BlogBlog
Blog
 
Mi primera App con GAE
Mi primera App con GAEMi primera App con GAE
Mi primera App con GAE
 
Servicios web
Servicios webServicios web
Servicios web
 

Mehr von jvelizster (17)

Api De Google Calendar
Api De Google CalendarApi De Google Calendar
Api De Google Calendar
 
Api Podcast
Api PodcastApi Podcast
Api Podcast
 
Produccion Global
Produccion GlobalProduccion Global
Produccion Global
 
Api Facebook
Api FacebookApi Facebook
Api Facebook
 
Dspace
DspaceDspace
Dspace
 
Cien Mejorque Uno
Cien Mejorque UnoCien Mejorque Uno
Cien Mejorque Uno
 
API Twitter
API TwitterAPI Twitter
API Twitter
 
API Flickr
API FlickrAPI Flickr
API Flickr
 
UStream Appi
UStream AppiUStream Appi
UStream Appi
 
Los Pioneros de la Producción entre iguales
Los Pioneros de la Producción entre igualesLos Pioneros de la Producción entre iguales
Los Pioneros de la Producción entre iguales
 
El Lugar De Trabajo Wiki
El Lugar De Trabajo WikiEl Lugar De Trabajo Wiki
El Lugar De Trabajo Wiki
 
Prosumidores
ProsumidoresProsumidores
Prosumidores
 
Mentes Colaborativas
Mentes ColaborativasMentes Colaborativas
Mentes Colaborativas
 
Los Neo Alejandrinos
Los Neo AlejandrinosLos Neo Alejandrinos
Los Neo Alejandrinos
 
La Tormenta Perfecta
La Tormenta PerfectaLa Tormenta Perfecta
La Tormenta Perfecta
 
Plataformas para la Participación
Plataformas para la ParticipaciónPlataformas para la Participación
Plataformas para la Participación
 
IdeáGoras
IdeáGorasIdeáGoras
IdeáGoras
 

Kürzlich hochgeladen

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 

Kürzlich hochgeladen (15)

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
presentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptxpresentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptx
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Presentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmerilPresentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmeril
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 

Google Maps

  • 1. Desarrollo de aplicaciones web 2.0 Gonzalo García G.
  • 2. Agenda ¿Qué es el Api de Google Maps?. Trabajando con el Api de Google Maps. Cargando el Api de Google Maps. Atributos del Mapa. Controles Básicos de un Mapa. Api de Google Maps Ejemplos.
  • 3. ¿Qué es el Api de ? Es un servidor de aplicaciones de mapas en Web. Ofrece imágenes de mapas desplazables. Nos permite insertar mapas en nuestras páginas web. http://maps.google.com Servicio gratuito. Parecido a Google Earth. Posee diferentes servicios que pueden ser utilizados La ruta mas corta
  • 4. Trabajando con el Api de Debemos disponer de un KEY. http://code.google.com/intl/es/apis/maps/signup.html Necesita tener una cuenta de GMAIL. micuenta@gmail.com La URL donde se aloja nuestro aplicativo http://127.0.0.1.8988/GoogleMapsApp ABQIAAAA6ztTU_R6Fg4G5z_F3u6ARhT_GVpaUHXll3jKIaNe6cKcjekxixRJnNqWj4iDOCWTAbCTaAEzTgEaYQ
  • 6. Cargando el Api de Incluimos el código JavaScript del API de Google Maps mediante la etiqueta <script> Creamos un elemento <div id=‘map_canvas’> que aloja el mapa. Escribimos una función JavaScript para crear un objeto de mapa initialize(). Centramos el mapa en un punto geográfico concreto. Inicializamos el objeto de mapa desde el evento onLoad de la etiqueta <body>.
  • 7. Cargando el Api de <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps Desarrollo de Aplicaciones Web 2.0</title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA6ztTU_R6Fg4G5z_F3u6ARhT_GVpaUHXll3jKIaNe6cKcjekxixRJnNqWj4iDOCWTAbCTaAEzTgEaYQ" type="text/javascript"> </script> <script type="text/javascript"> functioninitialize() { if (GBrowserIsCompatible()) { varmap = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(-2.204691, -79.889109), 15); } } </script> </head> <bodyonload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html>
  • 9. Atributos del Mapa Definidos mediante el método setMapType de GMap2 G_NORMAL_MAP: la vista predeterminada. G_SATELLITE_MAP: imágenes de satélite de Google Earth. G_HYBRID_MAP: mezcla de vistas normales y de satélite. G_DEFAULT_MAP_TYPES: una mezcla de estos tres tipos, útil para un procesamiento repetitivo.
  • 10. Controles Básicos de un Mapa GMapTypeControl Denota el tipo de Mapa: Híbrido, Satélite o Mapa GLargeMapControl Muestra un barra de desplazamiento para el zoom del mapa GScaleControl La escala del mapa GOverviewMapControl Muestra un mini-mapa en la esquina inferior derecha
  • 11. Api de Referencia WEB. http://code.google.com/intl/es/apis/maps/documentation/reference.html