Google maps by Jordan Diaz

Jordan Diaz Diaz@JordanSec

Google Maps Google Maps es el nombre de un servicio gratuito

de Google. Es un servidor de aplicaciones de mapas en la Web. Ofrece imágenes de mapas desplazables, así como fotos satelitales del mundo entero e incluso la ruta entre diferentes ubicaciones o imágenes a pie de calleStreet View. Desde el 6 de octubre del 2005, Google Maps es parte de Google Local.Es similar a Google Earth, una aplicación Windows/Mac/Linux que ofrece vistas del Globo terráqueo impactantes, pero que no es fácil de integrar a páginas Web.

Ofrece, asimismo, la posibilidad de que cualquier propietario de una página Web integre muchas de sus características a su sitio.

Easy Google Maps

• Easy Google Maps es una clase para PHP que, como su nombre indica facilita la inclusión de mapas a través de Google Maps en un sitio web. Lo primero que deberemos hacer, para poder utilizar la API de Google Maps es obtener una key o clave para el dominio en el que pensemos utilizar la API.

• Una vez tenemos una key podemos invocar un mapa de un modo tan sencillo como:

Código

<?php require'EasyGoogleMap.class.php'; $key ="XXXXXXXXXX"; $gm = & new EasyGoogleMap($key); $gm->SetMapZoom(15); $gm->SetAddress("Colon 22, Valencia"); $gm->SetInfoWindowText("Esta es la primera dirección"); $gm->SetAddress("Periodista Azzati 7, Valencia"); $gm->SetInfoWindowText("Esta es la segunda dirección"); ?>

Código<html> <head> <title>EasyGoogleMap</title> <?php echo $gm->GmapsKey(); ?> </head> <body> <?php echo $gm->MapHolder(); ?> <?php echo $gm->InitJs(); ?> <?php echo $gm->UnloadMap(); ?> </body> </html>

Algunas de las propiedades que podemos establecer son las siguientes://Para habilitar/deshabilitar el zoom progresivo.// De modo predeterminado deshabilitado (FALSE)$gm->mContinuousZoom = FALSE;//Para habilitar/deshabilitar La escala del mapa.// De modo predeterminado habilitado (TRUE)$gm->mScale = TRUE;

//Para habilitar/deshabilitar el mapa interno.// De modo predeterminado deshabilitado (FALSE)$gm->mInset = FALSE;

//Para habilitar/deshabilitar el tipo de mapa.// De modo predeterminado deshabilitado (FALSE)$gm->mMapType = FALSE; # default

//Para establecer las dimensiones del mapa//De modo predeterminado 300px x 300px$gm->SetMapWidth(500); $gm->SetMapHeight(500);

//Para establecer el zoom//De modo predeterminado 13$gm->SetMapZoom(10);

• //Para establecer el tipo de puntero• // De modo predeterminado se utiliza GT_FLAT• $gm->SetMarkerIconStyle('FLAG');• $gm->SetMarkerIconStyle('GT_FLAT');• $gm->SetMarkerIconStyle('GT_PILLOW');• $gm->SetMarkerIconStyle('HOUSE');• $gm->SetMarkerIconStyle('PIN');• $gm->SetMarkerIconStyle('PUSH_PIN');• $gm->SetMarkerIconStyle('STAR');

• //Para establecer el color del puntero• // De modo predeterminado se utiliza PACIFICA• $gm->SetMarkerIconColor('PACIFICA');• $gm->SetMarkerIconColor('YOSEMITE');• $gm->SetMarkerIconColor('MOAB');• $gm->SetMarkerIconColor('GRANITE_PINE');• $gm->SetMarkerIconColor('DESERT_SPICE');• $gm->SetMarkerIconColor('CABO_SUNSET');• $gm->SetMarkerIconColor('TAHITI_SEA');• $gm->SetMarkerIconColor('POPPY');• $gm->SetMarkerIconColor('NAUTICA');• $gm->SetMarkerIconColor('DEEP_JUNGLE');• $gm->SetMarkerIconColor('SLATE');• //Establecer el texto del bocadillo informativo• $gm->SetInfoWindowText("Este es el punto uno")

Google Maps JavaScript

¿Qué Queremos?• Un buscador de direcciones que mostrará el resultado

en el mapa de Google Maps.• Posibilidad de modificar manualmente el resultado

(veremos que quiere decir esto).• Generación de el código para el fichero de tipo kml:

un lenguaje de marcado basado en XML para representar datos geográficos en tres dimensiones desarrollado para ser manejado con Google Earth.

Que vamos a utilizar

• Básicamente vamos a utilizar dos clases del API de Google Maps:

• La clase Gmap2: Es la clase principal del API y la que nos permite pintar el mapa.

• La clase GClientGeocoder: Esta clase se utiliza para comunicar directamente con los servidores de Google y poder obtener los geocodes para las direcciones especificadas por un usuario. Además, un geocoder mantiene su propia cache de direcciones, que permite que las preguntas repetidas sean contestadas sin un viaje de ida y vuelta al servidor.

Creando el mapa y el cliente de geocoder

• Lo primero que tenemos que hacer es crear el mapa y el cliente de geocoder:

var map; var geocoder; function initialize() { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(40.452557, -3.510673), 15); // insertar los controles map.addControl(new GSmallMapControl()); map.addControl(new GM

apTypeControl()); geocoder = new GClientGeocoder(); }

Creando el mapa y el cliente de geocoder

• Al constructor de Gmap2 debemos pasarle un como parametro un contenedor HTML, que generalmente será un DIV. Además se le puede pasar parámetros opcionales como el tipo de mapa, etc. lo podeis consultar en el API.

• Luego estamos estableciendo las coordenadas en las que queremos centrar inicialmente el mapa, y el nivel de zoom.

• Insertamos los controles para cambiar el tipo de mapa (Mapa, Satelite o Hibrido) y el controlador de zoom y movimiento.

• Finalmente creamos el objeto que nos ayudara a buscar en el mapa.

http://code.google.com/apis/maps/documentation/reference.html#GMap2

Implementando la búsquedaVamos a ver las funciones para la búsqueda:

function showLocation() { var address = document.forms[0].q.value; geocoder.getLocations(address, addAddressToMap); } La función getLocations es la que nos permite realizar

búsquedas de una dirección en el mapa. Así de simple. Debemos pasarle la dirección y el nombre de la función que se ejecutará al recibir la respuesta del servidor, que es donde debemos programar toda la chicha de nuestra página. Os muestro un ejemplo a continuación:

• function addAddressToMap(response) • { • map.clearOverlays(); • if (!response || response.Status.code != 200) { • alert("Lo sentimos, no se ha encontrado su direcci&ocute;n"); • } else { • place = response.Placemark[0]; • point = new GLatLng(place.Point.coordinates[1], place.Point.coordinate

s[0]); • • map.setCenter(point, 15); • marker = new GMarker(point); • map.addOverlay(marker); • marker.openInfoWindowHtml(place.address); • document.getElementById("punto").value = marker.getLatLng().toUrlVa

lue(); • generateKML(place.address, • place.Point.coordinates[0], place.Point.coordinates[1]); • } • }

Implementando la búsqueda• Lo primero que se hace es limpiar el mapa. Comprobamos si la

respuesta es correcta, es decir, se ha encontrado la dirección. En el caso afirmativo toda la información se encuentra en el objeto respuesta.

• Nos puede devolver uno o mas objetos PlaceMark, que son los objetos que recogen toda la información de las localizaciones de los resultados obtenidos.

• Como vemos, recogemos el primer o único resultado, definimos un punto con las coordenadas geograficas de longitud y latitud, establecemos el centro de nuestro mapa en ese punto, estableciendo un zoom de nivel 15.

• A continuación creamos una marca en ese mismo punto y la añadimos al mapa, rellenamos la ventana de información con la dirección obtenida, mostramos las coordenadas en un textbox y generamos el codigo KML correspondiente.

Generando el código para el fichero KML

function generateKML(description, lng, lat){ document.getElementById("kml").value = ''; var kml = '<?xml version="1.0" encoding="UTF-8"?>\n'; kml = kml + '<kml xmlns="http://earth.google.com/kml/2.2">\n'; kml = kml + '<Placemark>\n'; kml = kml + '\

t<name>' + document.getElementById("empresa").value + '</name>\n';

kml = kml + '\t<description>' + description + '</description>\n'; kml = kml + '\t<Point><coordinates>' + lng + ',' + lat + ',0</

coordinates></Point>\n'; kml = kml + '</Placemark>\n'; kml = kml + '</kml>\n' document.getElementById("kml").value = kml; }

Generando el código para el fichero KML

Lo mas destacable son las coordenadas (longitud, latitud, altitud) para que Google Earth pueda encontrarlas en el mapa.

Un ejemplo de KML generado sería el siguiente:<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.2"> <Placemark> <name>Autentia</name> <description>Av de Castilla 2, 28830 San Fernando de Henares, Spai

n</description> <Point><coordinates>-3.510673,40.452557,0</coordinates></

Point> </Placemark> </kml>

Añadiendo la funcionalidad para poder modificar manualmente el resultado

de la búsqueda Queremos conseguir poder arrastrar con el ratón la marca del resultado

de la búsqueda de nuestra dirección, esto lo conseguimos modificando el código de la función addAddressToMap(response) de la siguiente manera:

..... marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { document.getElementById("punto").value = marker.getLatLng().toUrlValue()

; marker.openInfoWindowHtml(place.address); generateKML(place.address, marker.getLatLng().lng(), marker.getLatLng().lat

()); } ....

Al crear la marca con la opción draggable:true le estamos indicando a Google Maps que queremos poder moverla por el mapa. Debemos entonces añadir dos Listener a la marca, una para el “dragstart”, que como su nombre indica se lanzara en el momento que empiece el arrastre, y otro para el “dragend”, que se lanzará en el momento que finalice el arrastre.

En el “dragstart” lo único que hacemos es cerrar la ventana de información.

En el “dragend” actualizamos el textbox que muestra las coordenadas, mostramos de nuevo la ventana de información con la dirección y generamos de nuevo el KML con las nuevas coordenadas, muy sencillo.

Gracias

Google maps by Jordan Diaz

Documents

Transcript of Google maps by Jordan Diaz