HTML5 BUILDER – Usar Google Maps

Integrar mapas de Google en nuestras aplicaciones Php desarrolladas con Html5 Builder es muy sencillo ya que nos proporciona un componente que integra la funcionalidad necesaria para poder mostrar los mapas. Veamos un ejemplo de ello.

*** Importante, si estas iniciando con Html5 Builder te recomiendo ver esta entrada:  Hola mundo con Html5 Builder

 

Ejecutaremos nuestro entorno de desarrollo Html5 Builder y crearemos un nuevo proyecto server web application

 

 

En el formulario  que se nos muestra colocaremos cuatro componentes:

  1. Label
  2. Edit
  3. Button
  4. GoogleMap

como se muestra en la siguiente imagen:

google-maps

 

luego daremos doble click en el botón Localiza para entrar al editor de código y escribiremos el código siguiente dentro del evento ButtonClick:

    function Button1Click($sender, $params)
    {
      $this->GoogleMap1->Zoom = 9;
      $this->GoogleMap1->setAddress($this->Edit1->getText());
    }

Y ese será todo el código que añadiremos así que presionamos F9 para ejecutar nuestra aplicación y probaremos buscando un muy bonito lugar en México llamado Teotihuacan.

html5-builder-using-googlemaps

 

Como podemos ver es sumamente sencilla la integración de los mapas.

Ahora agregaremos la opción de poder elegir qué tipo de mapa deseamos ver y para ello añadiremos un ComboBox con los siguientes items:

  • gmRoadmap
  • gmHybrid
  • gmTerrain
  • gmSatellite

nuevamente daremos doble click en el botón localiza y agregaremos la línea que definirá el tipo de mapa a mostrar:

    function Button1Click($sender, $params)
    {
      $this->GoogleMap1->Zoom = 9;
      $this->GoogleMap1->setAddress($this->Edit1->getText());
      $this->GoogleMap1->MapType = $this->ComboBox1->getItemIndex($this->ComboBox1->ItemIndex);
    }

Al ejecutar y presionar el botón localiza obtendremos el siguiente resultado:

html5-builder-using-googlemaps-terrain

 

5 Comments

Deja un comentario