Jugando con la API de Google Maps (VI) – posicionando el mapa

Buenas,

Vimos en un mensaje anterior cómo conseguir mostrar en una aplicación Delphi un mapa de Google Maps. Ahora toca «jugar» con este mapa y, lo primero que tenemos que saber hacer es cómo centrarlo en una posición determinada (la latitud y longitud que nosotros queramos).

Para ello tendremos que realizar algún cambio en el código base de la página web. Lo primero es hacer global la variable que controla el mapa «map«. Para ello bastará con declararla fuera de la función y, por supuesto, quitar el «var» de la línea de creación del objeto google.maps.Map. Así pues, nuestro JavaScript quedará de la siguiente manera:

  var map = null;

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

Si nos damos una vuelta por la clase Map, veremos que tiene un método panTo definido de la siguiente forma

panTo(latLng:LatLng)

Este método recibe como parámetro un objeto de tipo LatLng que contendrá la longitud y latitud donde se centrará el mapa. Así pues, bastará con crear un objeto de éste tipo y hacer una llamada a este método para conseguir lo que buscamos.

Para construir el objeto de tipo LatLng y hacer la llamada al método Map.panTo, crearemos la siguiente función JavaScript en el código de la página:

  function CenterMap(Lat, Lng) {
   	map.panTo(new google.maps.LatLng(Lat, Lng));
  }

Ahora sólo quedará desde código Delphi hacer una llamada a esta función con los parámetros deseados. Para ello usaremos la interfaz IHTMLDocument2 la cual encapsula la información de la página web mostrada y la interfaz IHTMLWindow2 que contiene información sobre el objeto Windows (para más información consultar la ayuda de Delphi). La función de centrado del mapa podría ser algo así:

procedure TForm1.CentraMapa(const Long, Lat: string);
var
  Doc2: IHTMLDocument2;
  Win2: IHTMLWindow2;
  LatLng: String;
begin
  Doc2 := wbWeb.Document as IHTMLDocument2;
  Win2 := Doc2.parentWindow;

  LatLng := '"' + Lat + '", "' + Long + '"';

  Win2.execScript('CenterMap(' + LatLng + ')', 'JavaScript');
end;

Con ésto, sólo tenemos que ir llamando a nuestra función para ir moviéndonos por le mapa de Google a las coordenadas geográficas que queramos.

Puedes descargarte un ejemplo aquí (incluye ejecutable).

Continuará….

Nos leemos