> Manuales > Manual del API de Google Maps

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:
Añadir controles a un mapa de Google

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...

Manual