4. Helper Phoogle Maps para CakePHP

Hoy vamos a dar un paso importante con respecto a los dos posts anteriores y vamos a ver cómo integrar un ayudante Ajax en CakePHP para trabajar con Google Maps.

Justin Johnson es un desarrollador web que trabaja en www.systemsevendesigns.com. Ha programado una clase en PHP, Phoogle Maps (pronunciado Foogle Maps), que se integra con el API de Google y Yahoo! y facilita la visualización de mapas. Puedes descargarte esta clase aquí, haciendo clic en el enlace Download Phoogle Maps. Phoogle es el nombre de la clase PHP; para adaptar esta clase al framework CakePHP y convertirla en helper, o ayudante, hay que seguir estas explicaciones -hay dos-. Yo me descargué la versión 2 de Phoogle y seguí esta.

Mis pasos fueron estos:

1. Después de obtener la clase comprimida, copié el archivo phoogle.php en la carpeta views/helpers de mi aplicación Cake.

2. Edité el archivo phoogle.php y cambié la declaración de la clase:

Donde ponía esto:


class PhoogleMap{

escribí esto otro:


class PhoogleHelper extends Helper{

3. A continuación, edité el método de mi controlador, asociado al mapa, y cargué el ayudante Phoogle:


var $helpers = array('Phoogle'); 

Inicialicé la variable googleApiKey en este método, así:


$this->set('googleApiKey','tu_clave');

4. Edité el layout y puse esto, que escribe el código JavaScript que carga el API de Google:


if(isset($phoogle))
{
    $phoogle->setAPIKey($googleApiKey);
    $phoogle->printGoogleJS();
}

Este fragmento hay que insertarlo entre las etiquetas <head> y </head> del layout y sirve para cargar la versión 2 del API Google Maps -la versión se especifica en el parámetro v del URL-. El código que imprime el método printGoogleJS de la clase Phoogle es este:


<script src="http://maps.google.com/maps?file=api&v=2&key=tu_clave" type="text/javascript"></script>

5. Finalmente, escribí este fragmento de código en mi vista, dentro de la etiqueta:

<div id="map" style="width: 500px; height: 300px">


$phoogle->addAddress("Barcelona gaudi 2");

$phoogle->showMap();

Esto escribe en la vista el siguiente JavaScript:


      function showmap(){
            //<!&#91;CDATA&#91;

         if (GBrowserIsCompatible()) {

            var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(2.174498,41.404616,0,2.174498,41.404616,0), 4);
}

         var icon = new GIcon();
         icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
         icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
         icon.iconSize = new GSize(12, 20);
         icon.shadowSize = new GSize(22, 20);
         icon.iconAnchor = new GPoint(6, 20);
         icon.infoWindowAnchor = new GPoint(5, 1);

         map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var point0 = new GPoint(2.174498,41.404616,0,2.174498,41.404616,0)
;
              var marker0 = new GMarker(point0);

              map.addOverlay(marker0)

              GEvent.addListener(marker0, "click", function() {
marker0.openInfoWindowHtml("Barcelona gaudi 2");
});
      //&#93;&#93;>

      }
      window.onload = showmap;

Phoogle ha geocodificado la dirección “Barcelona gaudi 2”; es decir, ha calculado los valores 2.174498 y 41.404616, las coordenadas geográficas de esta dirección, mediante su método addAddress:


/**
* @function     addAddress
* @param        $address:string
* @returns      Boolean True:False (True if address has long/lat, false if it doesn't)
* @description  Add's an address to be displayed on the Google Map
*               (thus eliminating the need for two different show methods from version 1.0)
*/
   function addAddress($address,$htmlMessage=null){
    if (!is_string($address)){
      die("All Addresses must be passed as a string");
     }
      $apiURL = "http://maps.google.com/maps/geo?&output=xml&key=".$this->apiKey."&q=";
      $addressData = file_get_contents($apiURL.urlencode($address));

      $results = $this->xml2array(utf8_encode($addressData));
      if (empty($results['kml'][Response]['Placemark']['Point']['coordinates'])){
         $pointer = count($this->invalidPoints);
         $this->invalidPoints[$pointer]['lat']= $results['kml'][Response]['Placemark']['Point']['coordinates'][0];
         $this->invalidPoints[$pointer]['long']= $results['kml'][Response]['Placemark']['Point']['coordinates'][1];
         $this->invalidPoints[$pointer]['passedAddress'] = $address;
         $this->invalidPoints[$pointer]['htmlMessage'] = $htmlMessage;
        }else{
         $pointer = count($this->validPoints);
         $this->validPoints[$pointer]['lat']= $results['kml'][Response]['Placemark']['Point']['coordinates'];
         $this->validPoints[$pointer]['long']= $results['kml'][Response]['Placemark']['Point']['coordinates'];
         $this->validPoints[$pointer]['passedAddress'] = $address;
         $this->validPoints[$pointer]['htmlMessage'] = $htmlMessage;
      }

   }

Este método hace una petición HTTP al geocodificador de Google, especificando los parámetros q -dirección que se quiere geocodificar-, key -clave API Google Maps- y output -formato de la respuesta-. La respuesta que se obtiene de Google es un documento XML parecido a este, que el método addAddress analiza sintácticamente:

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<Response>
  <name>“Barcelona gaudi 2”</name>
<Status>
  <code>200</code>
  <request>geocode</request>
  </Status>
<Placemark id=”p1>
  <address>Avinguda de Gaudí, 2, 08025, Barcelona, España</address>
<AddressDetails Accuracy=”8 xmlns=”urn:oasis:names:tc:ciq:xsdschema:xAL:2.0>
<Country>
  <CountryNameCode>ES</CountryNameCode>
  <CountryName>España</CountryName>
<AdministrativeArea>
  <AdministrativeAreaName>CT</AdministrativeAreaName>
<SubAdministrativeArea>
  <SubAdministrativeAreaName>Barcelona</SubAdministrativeAreaName>
<Locality>
  <LocalityName>Barcelona</LocalityName>
<Thoroughfare>
  <ThoroughfareName>Avinguda de Gaudí 2</ThoroughfareName>
  </Thoroughfare>
<PostalCode>
  <PostalCodeNumber>08025</PostalCodeNumber>
  </PostalCode>
  </Locality>
  </SubAdministrativeArea>
  </AdministrativeArea>
  </Country>
  </AddressDetails>
<Point>
  <coordinates>2.174498,41.404616,0</coordinates>
  </Point>
  </Placemark>
  </Response>
  </kml>

Si todo sale bien, debería obtenerse un mapa de l’avinguda Gaudí de Barcelona, con la Sagrada Família al lado. Si encuentras algún error en este post o tienes algún problema instalando Phoogle puedes dejar aquí un comentario. ¡Suerte!

Anuncios

7 comentarios

  1. Hola, muy bueno tu post pero no me funciona la ultima parte, el codigo que va en la vista, como es?, no me funciona.

  2. Hola Juan Felipe,

    Si no recuerdo mal (hablo de memoria), tienes que escribir en la vista lo que pone en el paso 5. Es decir, sólo tres líneas de código: el div del mapa, y los métodos addAddress y showMap de la clase Phoogle.

    Pero ojo, ¡no hay que escribir el código que viene a continuación!, el que sigue a la frase “Esto escribe en la vista el siguiente JavaScript”. Quizás (que no lo sé), esto te ha despistado un poco… Ése es el código JavaScript que generan las líneas que escribes en la vista. Intenta probar esto; si no sale puedes adjuntar el errror que obtienes 😉 ¡Un saludo!

  3. Si había entendido bien, coloqué estas linea de codigo en la vista:

    Pero me sale el siguiente error:

    Undefined offset: 5 [APP\views\helpers\phoogle.php, line 315]

    Use of undefined constant Response – assumed ‘Response’ [APP\views\helpers\phoogle.php, line 132]

    Fatal error: Cannot use string offset as an array in C:\xampp\htdocs\cakephp\googlemaps\app\views\helpers\phoogle.php on line 132

  4. Vaya, pues ahora mismo no sabría qué decirte. Tendría que mirar el código del archivo phoggle.php para ver por qué se disparan estos mensajes de error. ¿Qué habrá en las líneas 315 y 132 del archivo phoogle.php? ¡Un saludo!

  5. Hola a todos. Primero felicitarte por el artículo. Muy bueno.

    Escribo pq a mi tambien me sale el error de ‘UNDEFINED OFFSET 5’. Si alguien puede ayudar, lo agradeceré…

  6. Podrias dejar el link de descarga para ver el codigo completo.

    Sirve mucho la explicación pero motiva más un demo y el código para estudiarlo.
    Voy a probar con lo que escribiste y te cuento.
    Saludos

    Cristian
    Concepción – Chile

  7. Muchas Gracias por el articulo, funciono de 10

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: