En nuestros mapas generados con el API de Google Maps se pueden incluir diversos controles para interacción con el usuario.
Como ya debemos de saber, los mapas de Google se pueden integrar en la página de cualquier persona que desee, a través de un API en Javascript. En este caso vamos a ver cómo incluir controles de usuario dentro de un mapa de Google, como funciona el API en este sentido y qué tipos de controles hay disponibles.
Antes que nada decir que este artículo viene a ampliar la información del manual Desarrollo con el API de Google Maps, por lo que muchas de las explicaciones para trabajar con los mapas de Google la tenemos que consultar en otros capítulos del mencionado manual.
Tipos de controles de usuario
Los controles de usuario de los mapas de Google (controls en inglés) son interfaces desde donde el usuario puede interaccionar con el mapa, para efectuar acciones como serían hacer zoom, seleccionar entre tipos de mapa (satélite, mapa, híbrido), o moverse por un mapa pequeño más general. Todos estos controles están ya creados y existen instrucciones y clases para incluirlos fácilmente en un mapa de Google.
Aunque cualquier desarrollador podría crear sus propios controles, existen varios tipos de controles de usuario en los mapas de Google ya creados de antemano:
Los controles de usuario para los mapas de Google que hemos visto se incluyen con una sencilla instrucción Javascript a la hora de crear el mapa. Como los controles ya están predefinidos en el API de Google Maps, simplemente tenemos que asociarlos al mapa que estamos creando.
Para ello se utiliza un método de la clase GMap2 llamado addControl(). La clase GMap2 es la que se utiliza para instanciar un mapa de google. Con ella creamos el objeto mapa y luego a este objeto con addControl() le asociamos los controles deseados. El método addControl() recibe una instancia del control de usuario que se desea crear.
Por ejemplo, si tenemos el mapa en un objeto llamado "map", ejecutaremos el método addControl() de esta manera:
map.addControl(new GMapTypeControl());
Podemos incluir todos los controles que deseemos haciendo varias llamadas al método addControl(), pasando como parámetro distintas instancias de los controls que queremos incluir.
Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles de usuario:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&keyAQUI-TU-CLAVE-DEL-API" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12);
map.addControl(new GMapTypeControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Como habíamos dicho, el desarrollador puede crear sus propios controles para incluirlos en sus mapas. Este es un tema que trataremos más adelante, pero por ahora podemos referiros a la documentación del API Google Maps para obtener más información: http://www.google.com/apis/maps/documentation/controls.html
Antes que nada decir que este artículo viene a ampliar la información del manual Desarrollo con el API de Google Maps, por lo que muchas de las explicaciones para trabajar con los mapas de Google la tenemos que consultar en otros capítulos del mencionado manual.
Tipos de controles de usuario
Los controles de usuario de los mapas de Google (controls en inglés) son interfaces desde donde el usuario puede interaccionar con el mapa, para efectuar acciones como serían hacer zoom, seleccionar entre tipos de mapa (satélite, mapa, híbrido), o moverse por un mapa pequeño más general. Todos estos controles están ya creados y existen instrucciones y clases para incluirlos fácilmente en un mapa de Google.
Aunque cualquier desarrollador podría crear sus propios controles, existen varios tipos de controles de usuario en los mapas de Google ya creados de antemano:
- GLargeMapControl: Muestra una interfaz para hacer zoom y moverse por el mapa, con una especie de regla donde se pueden escoger de las distintas aproximaciones de la vista. Este control aparece en la parte superior izquierda.
- GSmallMapControl: Es otro control de usuario para hacer zoom y moverse por el mapa, pero más pequeño, que también aparece en la esquina superior izquierda.
- GSmallZoomControl: Un control de usuario muy pequeñito, que aparece en la esquina superior izquierda que simplemente tiene un botón para ampliar el zoom y otro botón para reducirlo. Pero no tiene botones para moverse por el mapa.
- GScaleControl: Este es un control que simplemente informa sobre la escala actual del mapa. Con este control no se puede interaccionar, es meramente informativo.
- GMapTypeControl: Este control incluye tres botones para cambiar entre distintos tipos de mapa (mapa politico de calles y carreteras, mapa satélite y mapa híbrido -calles y carreteras sobre el fondo de satélite)
- GOverviewMapControl: Con este control aparece un pequeño mapita en la esquina inferior derecha donde aparece una vista general con menos zoom del mapa actual, a través del cual también podemos movernos.
Los controles de usuario para los mapas de Google que hemos visto se incluyen con una sencilla instrucción Javascript a la hora de crear el mapa. Como los controles ya están predefinidos en el API de Google Maps, simplemente tenemos que asociarlos al mapa que estamos creando.
Para ello se utiliza un método de la clase GMap2 llamado addControl(). La clase GMap2 es la que se utiliza para instanciar un mapa de google. Con ella creamos el objeto mapa y luego a este objeto con addControl() le asociamos los controles deseados. El método addControl() recibe una instancia del control de usuario que se desea crear.
Por ejemplo, si tenemos el mapa en un objeto llamado "map", ejecutaremos el método addControl() de esta manera:
map.addControl(new GMapTypeControl());
Podemos incluir todos los controles que deseemos haciendo varias llamadas al método addControl(), pasando como parámetro distintas instancias de los controls que queremos incluir.
Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles de usuario:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&keyAQUI-TU-CLAVE-DEL-API" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12);
map.addControl(new GMapTypeControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Como habíamos dicho, el desarrollador puede crear sus propios controles para incluirlos en sus mapas. Este es un tema que trataremos más adelante, pero por ahora podemos referiros a la documentación del API Google Maps para obtener más información: http://www.google.com/apis/maps/documentation/controls.html
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...