El blog de cadetill

Buenas,

Vimos en un mensaje anterior cómo conseguir posicionar el mapa en una determinada longitud y latitud. Ahora vamos a ver cómo poner marcas en estas longitudes y latitudes.

Para poner una marca en el mapa no es necesario tenerlo centrado dado que ésta es relativa al mapa, no al hecho del centrado. Así pues, siguiendo el ejemplo anterior, haremos que cuando se carguen las diferentes pestañas .

La clase Marker

Para crear una marca, lo que tendremos que hacer es crear un objeto de la clase Marker, así que os recomiendo que le deis un vistazo a sus métodos y eventos. Para nuestro propósito, lo que realmente nos interesa es el constructor, el cual recibe un objeto de tipo MarkerOptions con el que podremos configurar el aspecto de nuestra marca.

Este objeto tiene las siguientes propiedades:

• clickable: booleano que nos indicará si podemos o no hacer clic en la marca.
• cursor: string que contiene el cursor de ratón a mostrar.
• draggable: booleano que permitirá que la marca pueda desplazarse.
• flat: booleano que mostrará o no la sombra de la marca.
• icon: string o MarkerImage con el icono a mostrar para la marca.
• map: mapa asociado donde se mostrará la marca.
• position:LatLng donde se mostrará la marca.
• shadow: string o MarkerImage con la imagen de sombra.
• shape: MarkerShape que indica la región dónde se podrá hacer clic o desplazar.
• title: string con el título (hint para que nos entendamos los Delphinianos).
• visible: booleano para hacer o no visible la marca.
• zIndex: numérico que indicará el orden (superposición si se diera el caso) en que se mostrarán las marcas.

Cambios en el JavaScript

A nivel de JavaScript tendremos que realizar algunos cambios. Primero crearemos una función que nos genere la marca.

  function MakeMarker(Lat, Lng, titulo) {
    var latlng = new google.maps.LatLng(Lat,Lng);
    var aMarker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: titulo
        });
    markerArray[markerArray.length] = aMarker;
  }

De esta función destacar el array markerArray que contendrá todas las marcas puestas en el mapa. Este array nos servirá para, en búsquedas posteriores, poder borrar las marcas antes de mostrar las nuevas. Esta variable se ha definido global como la variabla map.

Otra función que añadiremos es la de borrar las marcas

  function DeleteMarkers() {
    for (i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);
    }
    markerArray = [];
  }

Ahora sólo queda controlar esto desde Delphi.

Cambios en Delphi

Por lo que respecta a Delphi, crearemos un par de funciones

    procedure PonerMarca(const Long, Lat, Titulo: string);
    procedure BorrarMarcas;

Estas dos funciones se llamarán desde el evento AfterGetValues de la clase TGeoCode.

Puedes descargarte un ejemplo aquí (incluye ejecutable).

Nos leemos

Buenas,

Una vez visto cómo funcionan nuestras clases, ha llegado el momento de mostrar la información en un mapa.

Si le damos un vistazo al tutorial del API de JavaScript de Google Maps nos podemos dar cuenta que es muy sencillo el mostrar un mapa con los datos que queramos mostrar. Vasta con montar una pequeña página web, que ésta ejecute un script y mostrarla en un TWebBrowser.

La página web

Lo primero es ver y comprender qué hace esta sencilla página web que, incluso para gente que no está familiarizada con la programación web, llega a entenderlo fácilmente. Para todo el que quiera verla, les remito a dicho tutorial.

La parte qué realmente nos interesa es el JavaScript que hay. Lo primero es  incluir el API de Google mediante la línea

<script type="text/javascript"
   src="http://maps.google.com/maps/api/js?sensor=false"></script>

Recordad lo que explicamos en un artículo anterior sobre el parámetro sensor.

Y ahora se crea una función que será llamada en el evento OnLoad del tag body la cual realizará los siguientes pasos.

• Crear un objeto para almacenar las coodenadas (latlng).
• Crear un objeto de tipo map options que contenga todas las características del mapa
• Crear un objeto «mapa» con los parámetros de dónde se mostrará y qué características tendrá

El resultado, éste:

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>

A nivel de características del mapa, decir que puede especificarse el zoom (zoom), la longitud y latitud en la que debe centrarse (center) y el tipo de mapa que se quiere visualizar (mapTypeId) que puede ser:

• ROADMAP: mapa normal 2D
• SATELLITE: muestra las fotografías de satélite
• HYBRID: mixto entre ROADMAP y SATELLITE
• TERRAIN: relieve físico del terreno

Esta es otra deferencia con la versión 2 del API. En la v2 existe una visión del mapa por defecto. En esta versión hay que especificarla. Si quieres saber más acerca de los tipos de mapa, te recomiendo una visita a Google Map Javascript API V3 – Map Types.

Ahora que se ha entendido lo que hace el código de la página, llega el momento de mostrarlo en nuestra aplicación Delphi. Lo primero que tendremos que decidir es dónde almacenaremos esta web, si en un archivo en disco y cargarlo en ejecución, si en un archivo de recursos o bien en una constante en el mismo código (o alguna otra manera que no se me ocurre ahora, jejeje). La del archivo físico en disco yo la descartaría de entrada por el simple motivo de que puede ser borrada por error, no copiada si se cambia de carpeta el contenido,….. Vamos, que es más fácil perder el archivo que otra cosa.

Y entre archivo de recursos o constante, pues ya depende de la manera en que nos guste programar. Si nos gusta un código más limpio, sin duda en un archivo de recursos. Pero si queremos poder ver en todo momento todo lo que afecta al programa y queremos tener un código algo más sencillo (no es que sea complicado usar un fichero de recursos), sin duda en una constante dentro del código. En este ejemplo, lo haremos mediante una constante (a la que llamaremos MAPA_CODE) en el código Delphi.

El objeto TWebBrowser

Para cargar nuestro mapa en el objeto TWebBroser dependerá de cómo lo hayamos guardado. Si lo hemos guardado como un archivo en disco, bastará con hacer una llamada al método Navigate pasándole como parámetro la ruta exacta de dónde se encuentra dicho fichero.

Y si lo que hemos hecho es almacenarlo en un fichero de recursos o en una constante, el proceder será algo diferente. La idea es conseguir tener un TStringStream que contenga el código fuente de la página web. Dado que nosotros almacenamos la página en una constante, bastará con crear una variable de éste tipo pasándole como parámetro la constante.

var
  StringStream: TStringStream;
begin
  StringStream := TStringStream.Create(MAPA_CODE);

Luego tenemos que asegurarnos que el objeto Document del TWebBrowser tiene «algo». Para ello basta con hacer una llamada a Navigate con la típica página de inicio.

    if not Assigned(wbWeb.Document) then wbWeb.Navigate('about:blank');

Ahora ya nos encontramos en la disposición de poder cargar nuestra página almacenada en el TStringStream. Para ello tenemos que coger la interfaz IPersistStreamInit del objeto Document, borrar el documento actual mediante una llamada al método InitNew del IPersistStreamInit, crear un objeto IStream con los datos del TStringStream y cargar este objeto IStream en el documento mediante el método Load del objeto IPersistStreamInit. Todo esto que parece una comida de olla, se resume en esta función:

procedure CargaWeb;
var
  StringStream: TStringStream;
  PersistStreamInit: IPersistStreamInit;
  StreamAdapter: IStream;
begin
  // creación del TStringStream con el string que contiene la página web
  StringStream := TStringStream.Create(MAPA_CODE);
  try
    // nos aseguramos de tener algún contenido en Document
    if not Assigned(wbWeb.Document) then wbWeb.Navigate('about:blank');

    // acceder a la interfaz IPersistStreamInit de Document
    if wbWeb.Document.QueryInterface(IPersistStreamInit, PersistStreamInit) = S_OK then
    begin
      // borrar datos actuales
      if PersistStreamInit.InitNew = S_OK then
      begin
        // creación y inicialización del IStream
        StreamAdapter:= TStreamAdapter.Create(StringStream);
        try
          Screen.Cursor := crHourGlass;
          // carga de la página web mediante IPersistStreamInit
          PersistStreamInit.Load(StreamAdapter);
        finally
          Screen.Cursor := crDefault;
        end;
      end;
    end;
  finally
    StringStream.Free;
  end;
end;

Si en el OnShow de un formulario hiciéramos una llamada a esta función, veríamos que en nuestro TWebBrowser se visualiza el mapa de Google en las coordenadas que trae por defecto (las que contiene nuestra constante).

Pero ésto no es lo que nosotros queremos. Lo que queremos es poder posicionar el mapa en un punto determinado y, ésto ya será parte del siguiente artículo.

Continuará….

Nos leemos

Buenas,

Pasando el rato por internet, yendo de página en página para pasar el rato, me topé con el blog de un viejo conocido, Neftalí. En él vi que, en cuatro muy buenos mensajes, explicaba cómo se consultaba y mostraba en un programa Delphi información de Google Maps.

La verdad es que me gustó mucho el tema y nunca se me hubiera pasado por la cabeza el usar Google Maps en una aplicación Delphi. Desde aquí le doy las gracias por abrirme los ojos, jejeje

Interesado en el tema, empecé a investigarlo y me di cuenta que lo explicado por Neftalí (y otras webs consultadas) nos mostraban el uso de la v2 de la API de Google Maps la cual, actualmente está marcada en desuso. Así que decidí dedicar algo de tiempo a actualizar estas demos encontradas a la nueva versión de la API, la v3.

La GeoCodificación

Como la propia web del API de Google Maps dice, «la GeoCodificación es el proceso de convertir una dirección (como «1600 Amphitheatre Parkway, Mountain View, CA») en coordenadas geográficas (como latitud 37.423021 y longitud -122.083739), que pueden usarse para poner marcas o posiciones en el mapa«.

Aunque podemos encontrar toda la documentación sobre la API de GeoCodificación aquí y su uso no sea demasiado complejo, vamos a explicar cómo funciona.

La idea es sencilla: se realiza una llamada a una determinada URL con una serie de parámetros y Google Maps nos devuelve un resultado formateado como le hayamos indicado.

Aquí tenemos la primera diferencia entre la V2 y la V3. En la primera, el formato devuelto era un parámetro más de la llamada y tenía 4 formatos posibles. En cambio, en la V3 el formato no es una parámetro y sólo tiene dos posibles salidas, o JSON o XML.

La url a la que se tiene que realizar la llamada es la siguiente:
http://maps.google.com/maps/api/geocode/output?parameters

Donde output define el formato de salida pudiendo ser json o xml quedando url como estas:
http://maps.google.com/maps/api/geocode/json?parameters
http://maps.google.com/maps/api/geocode/xml?parameters

Y los parámetros son los siguientes:

• address o latlng: obligatorio. Es la dirección que queremos GeoCodificar (no puede contener espacios, hay que sustituirlos por un «+») o bien las coordenadas geográficas directamente. Ej: ?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA
• sensor: obligatorio. Indica si el dispositivo desde el que se hace la petición dispone de sensor de localización. Ej: &sensor=false
• language: opcional. Determina el idioma de salida. Si no se indica, se intentará usar el idioma del dominio que realiza la petición (si es posible), sino se tomará el inglés. Ej: &language=es. Lista de idiomas soportados.
• region: opcional. Código de la región en formato ccTLD (country code top-level domain). La mayoría de códigos ccTLD corresponden a los códigos ISO 3166-1, aunque hay exepciones. Ej: &region=es
• bounds: opcional. Especifica una zona geográfica en la que buscar de forma preferida. Se realiza mediante la definición de un cuadro especificando sus lados noreste y suroeste separados por la barra vertical (|). Ej: &bounds=34.172684,-118.604794|34.236144,-118.500938

Una vez explicada la teoría, el implementar ésto en Delphi no resulta complicado. Bastará con tener un TEdit donde introducir la dirección a buscar, un TButton donde pondremos el código de la llamada, un TIdHTTP con el que realizar la petición web y un TMemo en el que mostrar el resultado obtenido. El código del TButton debería de ser algo así:

const
  CHAR_SPACE = ' ';
  CHAR_PLUS = '+';
  STR_WEB = 'http://maps.google.com/maps/api/geocode/json?address=';
  STR_SENSOR = '&sensor=false';
  STR_REGION = '&region=es';
var
  Str: string;
  Stream: TStringStream;
begin
  Stream := TStringStream.Create('');
  try
    // sustituimos blancos por signo +
    Str := AnsiReplaceStr(Edit1.Text, CHAR_SPACE, CHAR_PLUS);
    // generamos url con parámetros
    Str := STR_WEB + Str + STR_SENSOR + STR_REGION;
    // hacemos petición a la API de Google
    IdHTTP.Get(Str, Stream);
    // pasamos de UTF8 a string
    Memo1.Lines.Text := UTF8ToString(Stream.DataString);
  finally
    if Assigned(Stream) then FreeAndNil(Stream);
  end;
end;

No olvidemos de incluir en la cláusula uses la unit StrUtils.

Continuará……

Nos leemos