Tutorial: Grid con campo Google Maps

Crear una grid

1- Primeramente procedemos a crear una grid

Crear un campo

1. Para mostrar Google Maps en una aplicación de cuadrícula, primero crearemos un nuevo campo en la Grid.

2. Seleccione el tipo de datos a Google Maps.

3. Luego debemos editar la configuración del campo.

4. Tenemos 3 formas de usar un campo de Google Maps: geocodificación, latitud y longitud y URL.

Geocode: Indica qué campos de la Grid proporcionan la dirección. Se transformará en coordenadas geográficas por su ubicación en el mapa.

URL: Define el campo de aplicación que contiene la url de la ubicación.

Latitud: Establece el campo que contiene la latitud de la ubicación.

Longitud:  Establece el campo que contiene la longitud de la ubicación.

5. En este ejemplo, usaremos Geocode y seleccionaremos los campos País, Ciudad y Dirección para obtener la ubicación.

6. Seleccione para mostrarlo en la Grid.

7. Luego coloca tu clave API en el campo.

Nota: API Key es una clave única compuesta por una cadena (texto) alfanumérica, que no es más que una licencia para usar este servicio. Cuando se registra para usar el servicio, la clave se une a un dominio y un directorio en el servidor. Todas las páginas que utilizan la API deben estar en el directorio que se utilizó para registrarse.

Si tiene un servidor web en su máquina, solo obtiene una clave para las pruebas locales, y eso es poner http://localhost en el campo de dominio durante el registro.

Para obtener su clave API solo ingrese al sitio: http://code.google.com/intl/en/apis/maps/signup.html


Tutorials in the same category

Tutorial: Consulta con filtro modal.

En este tutorial se mostrará cómo configurar un filtro de consulta para que se muestre en una ven...

Image field

To add an image type field within a Grid, do the following: 1 - Create a Grid: 2- We ...

Campo Imagen

Para agregar un campo de tipo imagen dentro de una Grid se debe hacer lo siguiente: 1 - Crea...

Opción de Exportación

Para exportar diferentes tipos de archivos debemos realizar los siguientes pasos: 1 - Crear ...

Comment this post