SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Similaire à Google Maps

Google Analytics
Google AnalyticsGoogle Analytics
Google Analyticsjvelizster
 
Calculadora
CalculadoraCalculadora
Calculadorajolfp
 
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 AppOscar Salguero
 
Ejemplo usando la APIs de google
Ejemplo usando la APIs de googleEjemplo usando la APIs de google
Ejemplo usando la APIs de googleLilia 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 engineNigeŗ Arce
 
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 campingsLe Metayer Deckx William
 
Google maps by Jordan Diaz
Google maps by Jordan DiazGoogle maps by Jordan Diaz
Google maps by Jordan DiazJordan Diaz
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascriptoswchavez
 
Html Y Javascript
Html Y JavascriptHtml Y Javascript
Html Y Javascriptoswchavez
 
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+SUPRAndrés Flores
 
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 AndroidAlberto Ruibal
 
Mi primera App con GAE
Mi primera App con GAEMi primera App con GAE
Mi primera App con GAEGDG Lima
 

Similaire à 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
 

Plus de jvelizster

Api De Google Calendar
Api De Google CalendarApi De Google Calendar
Api De Google Calendarjvelizster
 
Produccion Global
Produccion GlobalProduccion Global
Produccion Globaljvelizster
 
Cien Mejorque Uno
Cien Mejorque UnoCien Mejorque Uno
Cien Mejorque Unojvelizster
 
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 igualesjvelizster
 
El Lugar De Trabajo Wiki
El Lugar De Trabajo WikiEl Lugar De Trabajo Wiki
El Lugar De Trabajo Wikijvelizster
 
Mentes Colaborativas
Mentes ColaborativasMentes Colaborativas
Mentes Colaborativasjvelizster
 
Los Neo Alejandrinos
Los Neo AlejandrinosLos Neo Alejandrinos
Los Neo Alejandrinosjvelizster
 
La Tormenta Perfecta
La Tormenta PerfectaLa Tormenta Perfecta
La Tormenta Perfectajvelizster
 
Plataformas para la Participación
Plataformas para la ParticipaciónPlataformas para la Participación
Plataformas para la Participaciónjvelizster
 

Plus de 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
 

Dernier

EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
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 estossgonzalezp1
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
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 eyvanamcerpam
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 

Dernier (10)

EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
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
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
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
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 

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