Desarrollo Con La API Google Maps

DESARROLLO CON LA API GOOGLE

MAPS

Ing. Cristhian N Figueroa M

[email protected]

Grupo de Ingeniería Telemática

Universidad del Cauca

Popayán Septiembre 2009

API GOOGLE MAPS

La API Google Maps permite a los desarrolladores colocar mapas embebidos

dentro de páginas web mediante JavaScript. La API provee un número de

utilidades para manipular y adicionar contenido a los mapas a través de una

variedad de servicios, de tal manera que se puedan crear mapas robustos dentro

del sitio web. Ver Figura 1.

Figura 1. Ejemplo de una página web utilizando la API de Google Maps

Para poder utilizar la API de Google Maps es necesario adquirir una clave la cual

puede ser descargada de la página http://code.google.com/apis/maps/signup.html

y simplemente agregar la dirección del sitio donde va a ser utilizada la API y

aceptar los términos y condiciones, hay que tener en cuenta que la clave solo

funcionará para las páginas dentro de la carpeta referenciada por el sitio web y no

por subcarpetas. Ver Figura 2.

Figura 2. Página para adquirir una clave para la API Google Maps

Una vez se haga clic en el botón “Generate API Key” se obtendrá un código

ejemplo de una página haciendo uso dla API Google Maps y en ese código se

podrá observar una parte inicial como la que sigue:

<script src="http://maps.google.com/maps?

file=api&v=2&key=abcdefg"

type="text/javascript">

</script>

En esa parte inicial observamos que con letras rojas aparece un valor llamado

“key” cuyo valor (en este caso de ejemplo “abcdfg”) es la clave que deberá ser

http://code.google.com/apis/maps/signup.html

copiada para poder utilizarse en las páginas web en las que se desee dibujar

mapas.

En la API Google Maps se pueden manejar los siguientes conceptos, Objetos

básicos de mas, eventos sobre mapas, controles de mapas, capas de mapas y

Servicios de mapas.

Bases para desarrollar mapas con la API Google Maps

El elemento fundamental en cualquier aplicación que utilice la API de Google

Maps es el mapa por sí mismo. Este objeto es de tipo GMap2, esto se puede ver a

continuación en el siguiente ejemplo de código de un mapa embebido en una

página web.

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script> <script type="text/javascript">

function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } }

</script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body></html>

El mapa que se construye con este ejemplo se ubica en la latitud 37.4419 y

longitud -122.1419, se puede observar con letras azules en el ejemplo anterior y

su resultado se presenta en la Figura 3:

Figura 3. Ejemplo de mapa construido con la API de Google Maps

En el ejemplo anterior hay 5 cosas para tener en cuenta:

1. El tag script de JavaScript donde está incluido el código del mapa.

2. El elemento div denominado “map_canvas” para posicionar el mapa en la

página web.

3. La función JavaScript initialize() para crear el objeto “map”.

4. El centro del mapa tiene que ver con un punto geográfico dado por la latitud

37.4419 y longitud -122.1419.

5. La inicialización del objeto mapa desde el evento onLoad de la tag body.

Además se pueden agregar más objetos sobre los mapas tales como

marcadores, polígonos, globos de información, controles, trazos, entre

otros, a continuación se observarán algunos ejemplos de cómo crear

marcadores, polígonos y globos de información.

Marcadores

Los marcadores generalmente son íconos ubicados sobre el mapa para

resaltar la posición de algo relevante para el usuario que está observando

el mapa como se puede observar en la Figura 4.

Figura 4. Ejemplo de mapa con marcadores

El código que crea al mapa de la Figura 4 se puede observar a

continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Simple Markers</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 10; i++) {

var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(latlng)); } } }

</script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body></html>

En el código anterior la línea roja indica la forma de crear cada marcador mediante

un objeto del tipo GMarker al cual se le pasa como parámetro un objeto del tipo

GLatLng con las coordenadas dónde se desea que se posicione el marcador.

Polígonos

Un polígono generalmente se utiliza para resaltar un área de interés, por ejemplo

en el caso de querer indicar cobertura o algo similar se puede utilizar un polígono

como en la Figura 5.

Figura 5. Un polígono en el mapa

El código que dibuja el polígono es el siguiente:

var latlng = new GLatLng(37.4419, -122.1419);

var lat = latlng.lat(); var lon = latlng.lng(); var latOffset = 0.01;

var lonOffset = 0.01; var polygon = new GPolygon([ new GLatLng(lat, lon - lonOffset), new GLatLng(lat + latOffset, lon), new GLatLng(lat, lon + lonOffset), new GLatLng(lat - latOffset, lon), new GLatLng(lat, lon - lonOffset)

], "#f33f00", 5, 1, "#ff0000", 0.2); map.addOverlay(polygon);

El constructor del polígono es como sigue:

GPolygon(points, strokeColor?, strokeWeight?, strokeOpacity?, fillColor?, fillOpacity?,

opts?)

En el ejemplo el primer atributo está formado por los puntos los cuales están

referenciados con la latitud y longitud en la que está ubicado el mapa es decir un

arreglo de vértices. El segundo atributo es el color indigado de la forma RRGGBB,

el tercer atributo es el ancho de la línea en pixeles, el quinto atributo corresponde

a la opacidad la cual es un número dado entre 0 y 1 así pues la línea será

semitransparente y el quinto atributo será el color con el que se llenará la región

semitransparente.

Globos de Información

Conocidos como info window dentro de la API Google Maps son pequeñas

ventanas que se despliegan sobre un objeto dentro del mapa para agregar

información adicional ver Figura 6.

Figura 6: Globo de información (Infowindow)

El código para crear una ventana de información es el siguiente:

GEvent.addListener(marker, "click", function() { var html = '<div style="width: 210px; padding-right: 10px"><a href="./signup.html">Sign up<\/a> for a Google Maps API key, or <a href="./documentation/index.html">read more about the API<\/a>.<\/div>'; marker.openInfoWindowHtml(html); }); map.addOverlay(marker);

En el anterior código se crea un objeto de tipo GEvent que permite escuchar el

evento clic sobre un marcador para abrir una ventana de información justo cuando

se haga clic sobre él.

Controles

Los controles permiten moverse a través del mapa y acercarlo o alejarlo de la

pantalla. Ver Figura 7.

Figura 7. Control de mapa

En el control de mapa de la Figura 7 las flechas permiten moverse a través del

mapa y los símbolos + y – permiten acercar o alejar el mapa. Además adiciona

tres botones más Mapa, Satélite e Híbrido los cuales permiten seleccionar el tipo

de mapa que se presentará, cuando se hace clic en mapa se muestra un mapa

con direcciones y delimitaciones políticas, en la parte Satélite se pueden observar

fotos satelitales de la región referenciada y en Híbrido se hace una superposición

entre los dos mapas. El código fuente de los controles es muy simple basta con

crear un objeto GSmallControl y adicionarlo al mapa así:

map.addControl(new GSmallMapControl());

A continuación se presenta un ejemplo que combina todos los anteriores ejemplos,

es decir, presenta un marcador con ventana de información, controles de mapa y

un polígono ver Figura 8.

Figura 8. Mapa con los objetos presentados anteriormente

El código fuente correspondiente al mapa de la Figura 8 es el siguiente:

if (GBrowserIsCompatible()) {//Crea un objeto del tipo GMap2 var map = new GMap2(document.getElementById("map"));//centra el mapa en las coordenadas representadas por lat1 y lon1//el numero 14 indica que tan lejos se quiere que se vea el mapa

map.setCenter(new GLatLng(lat1, lon1), 14); // crea un marcador ubicado en el centro del mapa var marcador = new GMarker(new GLatLng(lat1,lon1 ))//Crea un manejador de eventos en este caso para //detectar un clic de mouse sobre un marcador

GEvent.addListener(marcador, "click", function() { var html = 'LATITUD ('+lati+') LONGITUD ('+lon+')';

//Crea una ventana de informacion con el texto de la variable html

marcador.openInfoWindowHtml(html); });

//Agrega el marcador y la ventana de informacion al mapa map.addOverlay(marcador);

//adiciona los controles al mapa y lo ubica en la pantalla map.addControl(new GSmallMapControl()); var mapTypeControl = new GMapTypeControl();

var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));

map.addControl(mapTypeControl, topRight); var latOffset = 0.005; var lonOffset = 0.005;

//dibuja el poligono al rededor del marcador var polygon = new GPolygon([ new GLatLng(lat1, lon1 - lonOffset), new GLatLng(lat1 + latOffset, lon1), new GLatLng(lat1, lon1 + lonOffset), new GLatLng(lat1 - latOffset, lon1), new GLatLng(lat1, lon1 - lonOffset)

], "#f33f00", 5, 1, "#ff0000", 0.2); map.addOverlay(polygon);

}

Se pueden encontrar más ejemplos en la dirección:

http://code.google.com/apis/maps/documentation/examples/

http://code.google.com/apis/maps/documentation/examples/

Desarrollo Con La API Google Maps

Documents

Transcript of Desarrollo Con La API Google Maps