DESARROLLO CON LA API GOOGLE MAPS

Ing. Cristhian N Figueroa M cfigmart@unicauca.edu.co

Grupo de Ingeniería Telemática Universidad del Cauca Popayán Septiembre 2009

de tal manera que se puedan crear mapas robustos dentro del sitio web. Ver Figura 1.API GOOGLE MAPS La API Google Maps permite a los desarrolladores colocar mapas embebidos dentro de páginas web mediante JavaScript. Ejemplo de una página web utilizando la API de Google Maps . Figura 1. La API provee un número de utilidades para manipular y adicionar contenido a los mapas a través de una variedad de servicios.

com/apis/maps/signup. Figura 2.Para poder utilizar la API de Google Maps es necesario adquirir una clave la cual puede ser descargada de la página http://code.html y simplemente agregar la dirección del sitio donde va a ser utilizada la API y aceptar los términos y condiciones.com/maps?file=api&amp.v=2&amp.google. 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.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 . 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.google. Ver Figura 2.

} } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px.copiada para poder utilizarse en las páginas web en las que se desee dibujar mapas.org/TR/xhtml1/DTD/xhtml1-strict.v=2&amp.w3.setCenter(new GLatLng(37. -122.4419.google. 13).org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html.key=abcdefg" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document. capas de mapas y Servicios de mapas. controles de mapas. Objetos básicos de mas.w3.com/maps?file=api&amp. En la API Google Maps se pueden manejar los siguientes conceptos.dtd"> <html xmlns="http://www. 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. Este objeto es de tipo GMap2. eventos sobre mapas.1419). height: 300px"></div> </body> </html> . map. 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.getElementById("map_canvas")). charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.

El mapa que se construye con este ejemplo se ubica en la latitud 37. a continuación se observarán algunos ejemplos de cómo crear marcadores. La inicialización del objeto mapa desde el evento onLoad de la tag body. 5. polígonos y globos de información.1419. trazos. controles. 3. entre otros. . 2. El tag script de JavaScript donde está incluido el código del mapa. 4. globos de información. se puede observar con letras azules en el ejemplo anterior y su resultado se presenta en la Figura 3: Figura 3. polígonos. El elemento div denominado “map_canvas” para posicionar el mapa en la página web.4419 y longitud -122.1419. Ejemplo de mapa construido con la API de Google Maps En el ejemplo anterior hay 5 cosas para tener en cuenta: 1.4419 y longitud -122. La función JavaScript initialize() para crear el objeto “map”. El centro del mapa tiene que ver con un punto geográfico dado por la latitud 37. Además se pueden agregar más objetos sobre los mapas tales como marcadores.

var latSpan = northEast.w3.lat().key=ABQIAAAAzr2EBOXUKnm_jVn k0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document. var southWest = bounds.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.getBounds(). 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. Figura 4.getElementById("map_canvas")).setCenter(new GLatLng(37.org/TR/xhtml1/DTD/xhtml1-strict. i++) { .southWest.getSouthWest().getNorthEast(). -122. charset=utf-8"/> <title>Google Maps JavaScript API Example: Simple Markers</title> <script src="http://maps.lng() . map.lng().org/1999/xhtml" xmlns:v="urn:schemas-microsoftcom:vml"> <head> <meta http-equiv="content-type" content="text/html. var northEast = bounds.v=2&amp. i < 10. var lngSpan = northEast. 13).0 Strict//EN" "http://www.dtd"> <html xmlns="http://www.google.lat() . // Add 10 markers to the map at random locations var bounds = map. for (var i = 0.w3.1419).4419.southWest.com/maps?file=api&amp.

01. southWest. Figura 5. map.4419. Un polígono en el mapa El código que dibuja el polígono es el siguiente: var latlng = new GLatLng(37. Polígonos Un polígono generalmente se utiliza para resaltar un área de interés. var lon = latlng. .1419).lat(). var lat = latlng.var latlng = new GLatLng(southWest.lat() + latSpan * Math. 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. var latOffset = 0. } } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px. -122.addOverlay(new GMarker(latlng)).lng() + lngSpan * Math.random().lng(). por ejemplo en el caso de querer indicar cobertura o algo similar se puede utilizar un polígono como en la Figura 5.random()).

0.addOverlay(polygon).lonOffset) ]. fillOpacity?. "#ff0000". . 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. strokeOpacity?. lon). 5. strokeColor?. lon).lonOffset).2). fillColor?. lon . 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.var lonOffset = 0. El constructor del polígono es como sigue: GPolygon(points. 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. new GLatLng(lat. "#f33f00".01. new GLatLng(lat.latOffset. lon + lonOffset). map. El segundo atributo es el color indigado de la forma RRGGBB. lon . strokeWeight?. var polygon = new GPolygon([ new GLatLng(lat. new GLatLng(lat + latOffset. el tercer atributo es el ancho de la línea en pixeles. new GLatLng(lat . 1.

Figura 7./signup./documentation/index.html">read more about the API<\/a>.Figura 6: Globo de información (Infowindow) El código para crear una ventana de información es el siguiente: GEvent. function() { var html = '<div style="width: 210px. marker. Ver Figura 7. Control de mapa . or <a href=".openInfoWindowHtml(html).addListener(marker.addOverlay(marker). }). Controles Los controles permiten moverse a través del mapa y acercarlo o alejarlo de la pantalla.html">Sign up<\/a> for a Google Maps API key. map.<\/div>'. padding-right: 10px"><a href=". "click". 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 de mapa y un polígono ver Figura 8. lon1). function() { var html = 'LATITUD ('+lati+') LONGITUD ('+lon+')'. "click". Satélite e Híbrido los cuales permiten seleccionar el tipo de mapa que se presentará.addListener(marcador. presenta un marcador con ventana de información.addControl(new GSmallMapControl()).lon1 )) //Crea un manejador de eventos en este caso para //detectar un clic de mouse sobre un marcador GEvent. Además adiciona tres botones más Mapa. cuando se hace clic en mapa se muestra un mapa con direcciones y delimitaciones políticas. 14).getElementById("map")).setCenter(new GLatLng(lat1. // crea un marcador ubicado en el centro del mapa var marcador = new GMarker(new GLatLng(lat1. A continuación se presenta un ejemplo que combina todos los anteriores ejemplos. 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. Figura 8. //Crea una ventana de informacion con el texto de la variable html .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. 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. es decir. El código fuente de los controles es muy simple basta con crear un objeto GSmallControl y adicionarlo al mapa así: 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.

addOverlay(marcador). 1. new GLatLng(lat1. map. lon1). "#ff0000". var latOffset = 0.10)).2). lon1). } Se pueden encontrar más ejemplos en la dirección: http://code.marcador.latOffset. //Agrega el marcador y la ventana de informacion al mapa map.addControl(mapTypeControl.addOverlay(polygon). var mapTypeControl = new GMapTypeControl().005. 0. new GLatLng(lat1 . topRight). lon1 + lonOffset). //dibuja el poligono al rededor del marcador var polygon = new GPolygon([ new GLatLng(lat1. lon1 . map. new GLatLng(lat1. }). "#f33f00".google.com/apis/maps/documentation/examples/ .005. lon1 .addControl(new GSmallMapControl()).openInfoWindowHtml(html). var lonOffset = 0. new GSize(10.lonOffset) ]. //adiciona los controles al mapa y lo ubica en la pantalla map. 5.lonOffset). var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT. new GLatLng(lat1 + latOffset.

Sign up to vote on this title
UsefulNot useful