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 haces zoom. Si deseas colocar una imagen en un mapa, puedes usar un objeto GroundOverlay.
Para obtener información sobre otros tipos de superposiciones, consulta el artículo Cómo dibujar en el mapa.
Cómo agregar una superposición de suelo
El constructor de una GroundOverlay especifica la URL de una imagen y los LatLngBounds de la imagen como parámetros. La imagen se renderizará en el mapa, se adecuará a los límites establecidos y se conformará usando 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;
Prueba la muestra
Cómo quitar 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 la llamada a este método no borra la superposición. Simplemente la quita del mapa. Si deseas borrar la superposición, debes quitarla del mapa y, luego, establecer su valor como null.
function removeOverlay() {
historicalOverlay.setMap(null);
}