Superposiciones de suelo

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
Seleccionar plataforma: Android iOS JavaScript
  1. Introducción
  2. Cómo agregar una superposición de suelo
  3. Cómo quitar una superposición de suelo

Introducción

Las superposiciones son objetos del mapa que están vinculados a coordenadas de latitud y longitud, por lo que se mueven cuando arrastras el mapa o le aplicas zoom. Si deseas colocar una imagen en un mapa, puedes usar un objeto GroundOverlay.

Para obtener información sobre otros tipos de superposiciones, consulta Cómo dibujar en el mapa.

Agregar una superposición de suelo

El constructor para un GroundOverlay especifica una URL de una imagen y el LatLngBounds de la imagen como parámetros. La imagen se renderizará en el mapa, se limitará a los límites establecidos y se ajustará según la proyección del mapa.

TypeScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
Ver ejemplo

Probar la muestra

Eliminar una superposición de suelo

Para quitar una superposición de un mapa, llama al método setMap() de la superposición y pasa null. Ten en cuenta que llamar a este método no borra la superposición. Elimina la superposición del mapa. En cambio, si deseas borrar la superposición, debes quitarla del mapa y, luego, configurarla como null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Ver ejemplo