Controles

Visión general de los controles

Los mapas de http://maps.google.com contienen elementos de interfaz de usuario que permiten que el usuario interactúe con el mapa. Estos elementos se denominan controles y puedes incluir variaciones de ellos en tu aplicación creada con el API de Google Maps. También puedes crear tus propios controles personalizados mediante subclases de la clase GControl.

El API de Google Maps incorpora varios controles integrados que puedes emplear en tus mapas:

• GLargeMapControl: un control de desplazamiento y acercamiento de gran tamaño empleado en Google Maps. Se muestra en la esquina superior izquierda del mapa de forma predeterminada.
• GSmallMapControl: un control de desplazamiento y acercamiento más pequeño empleado en Google Maps. Se muestra en la esquina superior izquierda del mapa de forma predeterminada.
• GSmallZoomControl: un pequeño control de acercamiento (sin desplazamiento) empleado en las pequeñas ventanas de mapas que se utilizan para mostrar los pasos de las rutas en Google Maps.
• GScaleControl: una escala del mapa.
• GMapTypeControl: botones que permiten al usuario alternar entre tipos de mapas (como Mapa y Satélite).
• GHierarchicalMapTypeControl: una selección de botones anidados y elementos de menú para colocar muchos selectores de tipos de mapas.
• GOverviewMapControl: un mapa de vista general en la esquina de la pantalla que se puede contraer.

Todos estos controles se basan en el objeto GControl.

Los objetos GMapTypeControl y GHierarchicalMapTypeControl son casos especiales, porque también se pueden configurar. Estos controles añaden funciones para cambiar el objeto GMapType utilizado actualmente por el mapa en el API de Google Maps. Para obtener más información sobre la configuración de estos controles, consulta el apartado Modificación de la distribución de los controles estándar.

A continuación encontrarás una lista de los tipos de mapas admitidos actualmente:

• G_NORMAL_MAP muestra los mosaicos normales en 2D predeterminados de Google Maps.
• G_SATELLITE_MAP muestra imágenes de satélite.
• G_HYBRID_MAP muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades).
• G_PHYSICAL_MAP muestra mosaicos de mapas físicos a partir de la información de relieve.

También puedes definir tus propios tipos de mapas personalizados si tienes imágenes o superposiciones definidas.

De forma predeterminada, el API de Google Maps proporciona tres tipos de mapas: G_NORMAL_MAP, G_SATELLITE_MAP y G_HYBRID_MAP. Puedes modificar los tipos de mapas disponibles para un mapa eliminándolos mediante GMap2.removeMapType() o añadiéndolos mediante GMap2.addMapType(). Siempre que crees un control de tipo de mapa, éste utilizará los tipos de mapas adjuntos en ese momento y hará que estén disponibles. Ten en cuenta que deberás especificar las relaciones entre los tipos de mapas antes de añadir el control de tipo de mapa para que éste incluya dichas relaciones.

El código que aparece a continuación elimina G_HYBRID_MAP de los tipos de mapa disponibles adjuntos a un mapa, dejando sólo dos tipos de mapa. Una vez añadido el control GMapTypeControl, sólo estarán disponibles estos dos tipos de mapas.

var map = new GMap2(document.getElementById("map_canvas"),
  { size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());

Ver ejemplo (control-maptypes.html)

Adición de controles al mapa

Para añadir controles al mapa se utiliza el método GMap2 addControl(). Por ejemplo, para añadir el control de desplazamiento y acercamiento que ves en Google Maps a tu propio mapa, tendrías que incluir la siguiente línea al inicializar el mapa:

map.addControl(new GLargeMapControl());

Puedes añadir varios controles a un mapa. En este caso, añadimos los controles incorporados GSmallMapControl y GMapTypeControl, que nos permiten desplazarnos y aplicar el acercamiento al mapa, y cambiar entre los modos Mapa y Satélite, respectivamente. Los controles estándar son totalmente operativos cuando se incluyen en un mapa.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Ver ejemplo (control-simple.html)

Colocación de controles en el mapa

El método addControl requiere un segundo parámetro opcional GControlPosition que permite especificar la posición del control en el mapa. Este valor puede ser uno de los valores indicados a continuación. Cada uno de ellos especifica una de las esquinas del mapa en la que se puede colocar el control.

• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_BOTTOM_LEFT

Si se excluye este argumento, el API de Google Maps emplea la posición predeterminada especificada por el control.

Opcionalmente, GControlPosition puede especificar un desplazamiento que indique la cantidad de píxeles de distancia al borde del mapa del control. Estos desplazamientos se especifican mediante un objeto GSize.

Este ejemplo añade el control GMapTypeControl a la esquina superior derecha del mapa con 10 píxeles de desplazamiento. Al hacer doble clic en cualquier lugar del mapa, se elimina el control y se coloca en la esquina inferior derecha.

var map = new GMap2(document.getElementById"map_canvas"));
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
  map.removeControl(mapTypeControl);
  map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Ver ejemplo (control-positioning.html)

Consulta la referencia sobre la clase GControlPosition para obtener más información.

Modificación de la distribución de los controles estándar

La mayoría de los controles del API de Google Maps proporcionan un control sencillo con un comportamiento estándar. No obstante, algunos controles requieren un procedimiento de inicialización para que sea posible usarlos correctamente. Por ejemplo, el control GHierarchicalMapTypeControl normalmente requiere un código de inicialización para mostrar los tipos de mapas en un menú en cascada en el orden correcto.

Este ejemplo añade un tipo de mapa G_PHYSICAL_MAP con una capa de contornos de teselas superpuesta en el mapa y, a continuación, crea un control GHierarchicalMapTypeControl para organizar los tipos de mapas adicionales añadidos al mapa.

// define the crosshair tile layer and its required functions
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);

crossLayer.getTileUrl =  function(tile, zoom) {
  return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;}

// Create a new map type incorporating the tile layer
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
  G_PHYSICAL_MAP.getProjection(), "Ter+");

var map = new GMap2(document.getElementById("map_canvas"), 
  { size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();

// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");

// Add control after you've specified the relationships
map.addControl(mapControl);

map.addControl(new GLargeMapControl());

Ver ejemplo (control-initialization.html)

Controles de mapas personalizados

El API de Google Maps también permite crear controles de mapas personalizados mediante subclases de GControl. (Técnicamente, no se utilizan subclases de objetos en JavaScript, sino que se asigna un objeto prototype a una instancia del objeto GControl).

Para crear un control personalizado que se pueda utilizar, es necesario definir gestores para al menos dos métodos de la clase: initialize() y getDefaultPosition(). El método initialize() debe devolver un elemento DOM, mientras que el método getDefaultPosition() debe devolver un objeto de tipo GControlPosition.

Todos los controles del mapa deben añadirse al contenedor de mapa, al que se puede acceder mediante el método getContainer() de GMap2.

En este ejemplo, creamos un control de acercamiento sencillo con enlaces textuales en lugar de los iconos gráficos empleados en el control de acercamiento estándar de Google Maps.

// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).

// We define the function first
function TextualZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);

Ver ejemplo (control-custom.html)