Comunidad de Visual FoxPro en Español: Google Maps en un formulario de VFP

27 de septiembre de 2006

Google Maps en un formulario de VFP

Como crear un formulario en Visual FoxPro, que nos muestre mapas e imágenes satelitales de Google Maps.

Ya es por todos conocido que con Visual FoxPro podemos hacer muchas cosas. Una de ellas es incorporar un control Explorador Web en un formulario y utilizar código HTML y JavaScript. Esto ya lo publicó mi amigo Antonio Muñoz de Burgos y Caravaca en su artículo "Control del Explorador Web (HTML & JS & VFP)".

En este artículo, vamos a ver un ejemplo de como incorporar dinámicamente código HTML y JavaScript, que nos permita navegar por Google Maps y poder desplazarnos virtualmente a diversos lugares del mundo a bordo de nuestro velóz y querido zorro ;-)

Lo primero que vamos a utilizar en este ejemplo, es una tabla con algunos lugares de interes, con sus respectivas coordenadas georeferenciales (latitud y longitud) y el nivel de acercamiento. Con estos datos, generaremos una página HTML que mostraremos en un control Explorador Web que incluiremos en nuestro formulario.

El código completo de este ejemplo es el siguiente:

PUBLIC oMiForm
oMiForm = CREATEOBJECT("MiForm")
oMiForm.SHOW
RETURN

DEFINE CLASS MiForm AS FORM
  HEIGHT = 365
  WIDTH = 475
  AUTOCENTER = .T.
  CAPTION = "Ejemplo con Google Maps"
  NAME = "MiForm"
  SetPoint = ""
  SHOWWINDOW = 2

  ADD OBJECT cboDescrip AS COMBOBOX WITH ;
    ROWSOURCETYPE = 6, ROWSOURCE = "MisLugares.descri", ;
    HEIGHT = 24, LEFT = 12, TOP = 12, WIDTH = 330, ;
    STYLE = 2, NAME = "cboDescrip"

  ADD OBJECT cmdMostrar AS COMMANDBUTTON WITH ;
    TOP = 10, LEFT = 350, HEIGHT = 27, WIDTH = 112, ;
    CAPTION = "Mostrar mapa", NAME = "cmdMostrar"

  ADD OBJECT oleIE AS OLECONTROL WITH ;
    TOP = 48, LEFT = 12, HEIGHT = 300, WIDTH = 450, ;
    NAME = "oleIE", OLECLASS = "Shell.Explorer.2"

  PROCEDURE LOAD
    SYS(2333,1)
    THIS.SetPoint = SET("Point")
    SET POINT TO .
    SET SAFETY OFF
    *-- Creo el cursor con los datos
    CREATE CURSOR MisLugares (Descri C(40), Lat N(12,6), Lon N(12,6), Zoom I(4))
    INSERT INTO MisLugares VALUES ("Torre Eiffel (Francia)", 48.858333, 2.295000, 17)
    INSERT INTO MisLugares VALUES ("Basílica de San Pedro (Vaticano)", 41.902102, 12.456400, 17)
    INSERT INTO MisLugares VALUES ("Estatua de la  Libertad (EEUU)", 40.689360, -74.044400, 17)
    INSERT INTO MisLugares VALUES ("Estadio Monumental (Argentina)", -34.545277, -58.449722, 17)
    INSERT INTO MisLugares VALUES ("Estadio Azteca (Mexico)", 19.302900, -99.150400, 17)
    INSERT INTO MisLugares VALUES ("Estadio Camp Nou (España)", 41.380906, 2.123330, 17)
    INSERT INTO MisLugares VALUES ("Cementerio de aviones (EEUU)", 32.174247, -110.855874, 14)
  ENDPROC

  PROCEDURE DESTROY
    SET POINT TO (THIS.SetPoint)
  ENDPROC

  PROCEDURE cboDescrip.INIT
    THIS.LISTINDEX = 1
  ENDPROC

  PROCEDURE cmdMostrar.CLICK
    TEXT TO lcHtml NOSHOW TEXTMERGE
    <html> <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=123" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load()
    { if (GBrowserIsCompatible())
      { var map = new GMap2(document.getElementById("map"),G_SATELLITE_MAP);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
      map.setCenter(new GLatLng(<<ALLTRIM(STR(MisLugares.Lat,12,6))>>,
      <<ALLTRIM(STR(MisLugares.Lon,12,6))>>),<<TRANSFORM(MisLugares.Zoom)>>);
      map.setMapType(G_HYBRID_MAP);
    } }
    //]]> </script> </head>
    <body scroll="no" bgcolor="#CCCCCC" topmargin="0" leftmargin="0"
    onload="load()" onunload="GUnload()">
    <div id="map" style="width:450px;height:300px"></div>
    </body> </html>
    ENDTEXT
    STRTOFILE(lcHtml,"MiHtml.htm")
    THISFORM.oleIE.Navigate2(FULLPATH("MiHtml.htm"))
  ENDPROC

ENDDEFINE

Los resultados de ejecutar el código son los siguientes:

Google Maps posee muchísimas opciones que permiten añadir controles para el desplazamiento, etiquetas, marcadores, escalas, etc. Lo mejor para aprender a utilizarlo, es leer la documentación disponible en el sitio Google Maps API, como así también leer y ajustarse a los Términos de Uso.

Hasta la próxima.

Luis María Guayán