Google Maps
12
DESARROLLO DE APLICACIONES WEB 2.0 GONZALO GARCÍA G.
-
Upload
jvelizster -
Category
Technology
-
view
2.248 -
download
2
description
Transcript of Google Maps
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 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.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. [email protected]
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"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(-2.204691, -79.889109), 15); } } </script> </head>
<body onload="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
