Pronto habrá nuevas opciones para el diseño de mapas disponibles en Google Maps Platform. Esta actualización del diseño de mapas incluye una nueva paleta de colores predeterminada, así como mejoras en la experiencia y la usabilidad del mapa. Todos los diseños de mapa se actualizarán automáticamente en marzo de 2025. Para obtener más información sobre la disponibilidad y cómo habilitar esta actualización antes, consulta Nuevo diseño de mapa para Google Maps Platform.
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;
// 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;
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);
}