Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Superposiciones personalizadas

  1. Introducción
  2. Agregar una superposición personalizada
    1. Crear una subclase de la superposición
    2. Inicializar la superposición
    3. Dibujar la superposición
  3. Eliminar una superposición personalizada
  4. Ocultar y mostrar una superposición personalizada

Introducción

Las superposiciones son objetos del mapa que están relacionados con coordenadas de latitud y longitud, por lo que se mueven cuando arrastras el mapa o le aplicas zoom. Para obtener información sobre tipos de superposiciones predefinidas, consulta Cómo dibujar en el mapa.

La Google Maps JavaScript API proporciona una clase OverlayView para crear tus propias superposiciones personalizadas. OverlayView es una clase base que proporciona varios métodos que debes implementar al crear tus superposiciones. También proporciona algunos métodos que permiten traducir coordenadas y ubicaciones en pantalla en el mapa.

Agregar una superposición personalizada

A continuación, se muestra un resumen de los pasos requeridos para crear una superposición de personalizada:

  • Configura el prototipo del objeto de tu superposición personalizada en una nueva instancia de google.maps.OverlayView(). En efecto, con esto se podrá crear una subclase de la clase superposición.
  • Crea un constructor para tu superposición personalizada y configura los parámetros de inicialización.
  • Implementa un método onAdd() dentro de tu prototipo y adjunta la superposición al mapa. Se llamará a OverlayView.onAdd() cuando el mapa esté listo para que se ajunte la superposición.
  • Implementa un método draw() dentro de tu prototipo y administra la visualización de tu objeto. Se llamará a OverlayView.draw() cuando el objeto aparezca por primera vez.
  • También debes implementar un método onRemove() para limpiar elementos agregados a la superposición.

A continuación, se ofrece información más detallada sobre cada paso. También puedes ver el ejemplo funcional completo: Ver el ejemplo (overlay-simple.html).

Crear una subclase de la superposición

En el ejemplo siguiente, se usa OverlayView para crear una superposición de imágenes simple.

// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 62.323907, lng: -150.109291},
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(62.281819, -150.287132),
      new google.maps.LatLng(62.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/' +
      'javascript/examples/full/images/talkeetna.png';

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);
}

Luego se crea un constructor para la clase USGSOverlay y se inicializan los parámetros transferidos como propiedades del nuevo objeto.

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

En este punto aún no se puede adjuntar esta superposición al mapa en el constructor. En primer lugar, debemos asegurarnos de que todos los paneles del mapa estén disponibles, ya que especifican el orden en el cual los objetos se muestran en un mapa. En la API se proporciona un método de ayuda que indica que esto se produjo. Este método se tratará en la sección siguiente.

Inicializar la superposición

Cuando se hayan creado instancias de tu superposición y esté lista para visualizarse, se deberá adjuntar al mapa a través del DOM del navegador. La API indica que la superposición se agregó al mapa invocando el método onAdd() de esta. Con el propósito de administrar este método, se crea un elemento <div> para contener tu imagen, se agrega un elemento <img>, que se adjunta al elemento <div>, y luego se adjunta la superposición a uno de los paneles del mapa. Un panel es un nodo dentro del árbol de DOM.

Los paneles de tipo MapPanes especifican el orden de apilamiento para diferentes capas del mapa. Los siguientes paneles se encuentran disponibles y se enumeran en el orden en que forman la pila, desde el final hasta el principio:

  • mapPane es el panel superior y se encuentra encima de los mosaicos. Es posible que no reciba eventos de DOM. (Panel 0).
  • overlayLayer contiene polilíneas, polígonos, superposiciones de suelo y superposiciones de capas de mosaicos. Es posible que no reciba eventos de DOM. (Panel 1).
  • overlayShadow contiene las sombras de marcadores. Es posible que no reciba eventos de DOM. (Panel 2).
  • overlayImage contiene las imágenes de primer plano de marcadores. (Panel 3).
  • floatShadow contiene la sombra de la ventana de información. Se encuentra encima de overlayImage para que los marcadores puedan hallarse en la sombra de la ventana de información. (Panel 4).
  • overlayMouseTarget contiene elementos que reciben eventos de DOM del mouse, como los objetivos transparentes de los marcadores. Se encuentra encima de floatShadow para que puedan seleccionarse los marcadores que se hallan en la sombra de la ventana de información. (Panel 5).
  • floatPane contiene la ventana de información. Se encuentra encima de todas las superposiciones del mapa. (Panel 6).

Debido a que la imagen es una “superposición de suelo”, se usará el panel overlayLayer. Cuando se disponga de ese panel, se le adjuntará el objeto como hijo.

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

Dibujar la superposición

Ten en cuenta que no se invocaron visualizaciones en el código anterior. La API invoca un método draw() separado en la superposición cuando debe dibujarla en el mapa. Esto incluye la primera ocasión en que se agrega.

Por lo tanto, se implementará este método draw(), se recuperará el objeto MapCanvasProjection de la superposición usando getProjection() y se calcularán las coordenadas exactas en las cuales se fijarán los puntos superior derecho e inferior izquierdo. Luego se podrá cambiar el tamaño del elemento <div>. A su vez, con esto se cambiará el tamaño de la imagen para adecuarlo a los límites especificados en el constructor de la superposición.

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

Eliminar una superposición personalizada

También se debe agregar un método onRemove() para eliminar por completo la superposición del mapa.

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

Ocultar y mostrar una superposición personalizada

Si deseas ocultar o mostrar una superposición en lugar de simplemente crearla o eliminarla, puedes implementar tus propios métodos hide() y show() para ajustar la visibilidad de esta. También puedes desasociar la superposición del DOM del mapa, aunque esta operación es ligeramente más costosa. Ten en cuenta que si vuelves a adjuntar la superposición al DOM del mapa, este volverá a invocar el método onAdd() de la superposición.

En el siguiente ejemplo se agregan al prototipo de la superposición los métodos hide() y show() que alternan la visibilidad del <div> contenedor. A su vez, se agrega un método toggleDOM() que adjunta la superposición al mapa o la desasocia de él.

// Set the visibility to 'hidden' or 'visible'.
USGSOverlay.prototype.hide = function() {
  if (this.div_) {
    // The visibility property must be a string enclosed in quotes.
    this.div_.style.visibility = 'hidden';
  }
};

USGSOverlay.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = 'visible';
  }
};

USGSOverlay.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility === 'hidden') {
      this.show();
    } else {
      this.hide();
    }
  }
};

// Detach the map from the DOM via toggleDOM().
// Note that if we later reattach the map, it will be visible again,
// because the containing <div> is recreated in the overlay's onAdd() method.
USGSOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
    // Note: setMap(null) calls OverlayView.onRemove()
    this.setMap(null);
  } else {
    this.setMap(this.map_);
  }
};

Encárgate de la interfaz de usuario:

<!-- Add an input button to initiate the toggle method on the overlay. -->
    <div id="floating-panel">
      <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
      <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
    </div>

Ver el ejemplo (overlay-hideshow.html).

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.