0
Desarrollo de aplicaciones web 2.0<br />Gonzalo García G.<br />
Agenda<br />¿Qué es el Api de Google Maps?.<br />Trabajando con el Api de Google Maps.<br />Cargando el Api de Google Maps...
¿Qué es el Api de                ?<br />Es un servidor de aplicaciones de mapas en Web.<br />Ofrece imágenes de mapas desp...
Trabajando con el Api de<br />Debemos disponer de un KEY.<br />http://code.google.com/intl/es/apis/maps/signup.html<br />N...
&lt;script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAA6ztTU_R6Fg4G5z_...
Cargando el Api de <br />Incluimos el código JavaScript del API de Google Maps mediante la etiqueta &lt;script&gt;<br />Cr...
Cargando el Api de <br />&lt;html&gt;<br />  &lt;head&gt;<br />    &lt;meta http-equiv=&quot;content-type&quot; content=&q...
Cargando el Api de <br />
Atributos del Mapa<br />Definidos mediante el método setMapType de GMap2<br />G_NORMAL_MAP: la vista predeterminada. <br /...
Controles Básicos de un Mapa<br />GMapTypeControl<br />Denota el tipo de Mapa: Híbrido, Satélite o Mapa<br />GLargeMapCont...
Api de <br />Referencia WEB. http://code.google.com/intl/es/apis/maps/documentation/reference.html<br />
Ejemplos<br />
Upcoming SlideShare
Loading in...5
×

Google Maps

2,333

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,333
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Google Maps"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×