Your SlideShare is downloading. ×
Google maps by Jordan Diaz
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google maps by Jordan Diaz

926
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
926
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jordan Diaz Diaz @JordanSec
  • 2. 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.
  • 3. 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:
  • 4. Código
    • <?php  
    • require'EasyGoogleMap.class.php';  
    • $key =&quot;XXXXXXXXXX&quot;;  
    • $gm = & new EasyGoogleMap($key);  
    • $gm->SetMapZoom(15);  
    • $gm->SetAddress(&quot;Colon 22, Valencia&quot;);  
    • $gm->SetInfoWindowText(&quot;Esta es la primera dirección&quot;);  
    • $gm->SetAddress(&quot;Periodista Azzati 7, Valencia&quot;);  
    • $gm->SetInfoWindowText(&quot;Esta es la segunda dirección&quot;);  
    • ?>  
  • 5. 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>  
    •     
  • 6. 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;
  • 7.
    • //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);
  • 8.
    • //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');
  • 9.
    • //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(&quot;Este es el punto uno&quot;)
  • 10. DEMO
  • 11. 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.
  • 12. 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.
  • 13. 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(&quot;map_canvas&quot;));  
    •    map.setCenter(new GLatLng(40.452557, -3.510673), 15);   
    •    // insertar los controles   
    •    map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());   
    •    geocoder = new GClientGeocoder();   
    • }   
  • 14. 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.
  • 15. Implementando la búsqueda
    • Vamos 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:
  • 16.
    • function  addAddressToMap(response)  
    • {  
    •    map.clearOverlays();  
    •    if  (!response || response.Status.code != 200) {  
    •      alert(&quot;Lo sentimos, no se ha encontrado su direcci&ocute;n&quot;);  
    •    }  else  {  
    •      place = response.Placemark[0];  
    •      point =  new  GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);   
    •   
    •      map.setCenter(point, 15);  
    •      marker =  new  GMarker(point);  
    •      map.addOverlay(marker);  
    •      marker.openInfoWindowHtml(place.address);  
    •      document.getElementById(&quot;punto&quot;).value = marker.getLatLng().toUrlValue();  
    •      generateKML(place.address,  
    •      place.Point.coordinates[0], place.Point.coordinates[1]);  
    •    }  
    • }  
  • 17. 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.
  • 18. Generando el código para el fichero KML
    • function  generateKML(description, lng, lat){  
    •    document.getElementById(&quot;kml&quot;).value = '';  
    •    var  kml = '<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>n';  
    •    kml = kml + '<kml xmlns=&quot;http://earth.google.com/kml/2.2&quot;>n';  
    •    kml = kml + '<Placemark>n';  
    •    kml = kml + 't<name>' + document.getElementById(&quot;empresa&quot;).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(&quot;kml&quot;).value = kml;  
    • }  
  • 19. 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=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>   
    • <kml  xmlns=&quot;http://earth.google.com/kml/2.2&quot; >   
    • <Placemark>   
    •      <name> Autentia </name>   
    •      <description> Av de Castilla 2, 28830 San Fernando de Henares, Spain </description>   
    •      <Point><coordinates> -3.510673,40.452557,0 </coordinates></Point>   
    • </Placemark>   
    • </kml>   
  • 20. 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, &quot;dragstart&quot;,  function () {  
    •    map.closeInfoWindow();  
    • });  
    •   
    • GEvent.addListener(marker, &quot;dragend&quot;,  function () {  
    •    document.getElementById(&quot;punto&quot;).value = marker.getLatLng().toUrlValue();  
    •    marker.openInfoWindowHtml(place.address);  
    •    generateKML(place.address, marker.getLatLng().lng(), marker.getLatLng().lat());  
    • }  
    • ....  
  • 21.
    • 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.
  • 22. DEMO
  • 23. Gracias