Em breve, a Plataforma Google Maps usará a nova estilização de mapas. Essa atualização inclui uma nova paleta de cores padrão e melhorias nas experiências de mapa e na usabilidade. Todos os estilos de mapa serão atualizados automaticamente em março de 2025. Para mais informações sobre a disponibilidade e como ativar logo, consulte Novo estilo de mapa para a Plataforma Google Maps.
As sobreposições são objetos no mapa vinculados a coordenadas de latitude/longitude. Portanto, eles se movem quando você arrasta ou aplica zoom no mapa. Para inserir uma imagem em um mapa, use um objeto GroundOverlay.
Para informações sobre outros tipos de sobreposição, consulte Desenhar no mapa.
Adicionar uma sobreposição de solo
O construtor de um GroundOverlay especifica o URL de uma imagem e o LatLngBounds da imagem como parâmetros. A imagem é renderizada no mapa, restrita aos limites informados e adaptada usando a projeção do 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 remover uma superposição de um mapa, chame o método setMap() da superposição, passando null. A chamada desse método não elimina a sobreposição. Ela só remove a sobreposição do mapa. Se, em vez disso, você quiser excluir a superposição, vai precisar remover essa opção do mapa e definir a própria superposição como null.
function removeOverlay() {
historicalOverlay.setMap(null);
}