Desarrollo de aplicaciones web 2.0Gonzalo 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 MapsEjemplos.
¿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.comServicio gratuito.Parecido a Google Earth.Posee diferentes servicios que pueden ser utilizadosLa ruta mas corta
Trabajando con el Api deDebemos disponer de un KEY.http://code.google.com/intl/es/apis/maps/signup.htmlNecesita tener una cuenta de GMAIL.micuenta@gmail.comLa URL donde se aloja nuestro aplicativohttp://127.0.0.1.8988/GoogleMapsAppABQIAAAA6ztTU_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 MapaDefinidos mediante el método setMapType de GMap2G_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 MapaGMapTypeControlDenota el tipo de Mapa: Híbrido, Satélite o MapaGLargeMapControlMuestra un barra de desplazamiento para el zoom del mapaGScaleControlLa escala del mapaGOverviewMapControlMuestra un mini-mapa en la esquina inferior derecha
Api de Referencia WEB. http://code.google.com/intl/es/apis/maps/documentation/reference.html
Ejemplos

Google Maps

  • 1.
    Desarrollo de aplicacionesweb 2.0Gonzalo García G.
  • 2.
    Agenda¿Qué es elApi 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 MapsEjemplos.
  • 3.
    ¿Qué es elApi 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.comServicio gratuito.Parecido a Google Earth.Posee diferentes servicios que pueden ser utilizadosLa ruta mas corta
  • 4.
    Trabajando con elApi deDebemos disponer de un KEY.http://code.google.com/intl/es/apis/maps/signup.htmlNecesita tener una cuenta de GMAIL.micuenta@gmail.comLa URL donde se aloja nuestro aplicativohttp://127.0.0.1.8988/GoogleMapsAppABQIAAAA6ztTU_R6Fg4G5z_F3u6ARhT_GVpaUHXll3jKIaNe6cKcjekxixRJnNqWj4iDOCWTAbCTaAEzTgEaYQ
  • 5.
  • 6.
    Cargando el Apide 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 Apide <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>
  • 8.
  • 9.
    Atributos del MapaDefinidosmediante el método setMapType de GMap2G_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 deun MapaGMapTypeControlDenota el tipo de Mapa: Híbrido, Satélite o MapaGLargeMapControlMuestra un barra de desplazamiento para el zoom del mapaGScaleControlLa escala del mapaGOverviewMapControlMuestra un mini-mapa en la esquina inferior derecha
  • 11.
    Api de ReferenciaWEB. http://code.google.com/intl/es/apis/maps/documentation/reference.html
  • 12.