Auf der Google Maps Platform ist bald eine neue Version der Funktionen für das cloudbasierte Gestalten von Karteninhalten verfügbar. Die Aktualisierung umfasst eine neue Standardfarbvorlage und Optimierungen in Bezug auf die Nutzerfreundlichkeit der Karten. Alle Kartenstile werden im März 2025 automatisch aktualisiert. Weitere Informationen zur Verfügbarkeit und Aktivierung sind unter Neuer Kartenstil für die Google Maps Platform verfügbar.
Overlays sind Objekte auf der Karte, die an Breiten- und Längengrad gebunden sind, sodass sie sich beim Ziehen oder Zoomen der Karte mitbewegen. Wenn Sie ein Bild auf einer Karte platzieren möchten, können Sie ein GroundOverlay-Objekt verwenden.
Informationen zu anderen Arten von Overlays finden Sie unter Auf Karten zeichnen.
Boden-Overlays hinzufügen
Der Konstruktor für ein GroundOverlay-Objekt definiert eine Bild-URL und die LatLngBounds-Werte des Bilds als Parameter. Das Bild wird auf der Karte gerendert. Dabei wird es auf die angegebenen Grenzen beschränkt und an die Projektion der Karte angepasst.
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;
Wenn Sie ein Overlay von einer Karte entfernen möchten, rufen Sie die Methode setMap() des Overlays auf und übergeben Sie null. Dadurch wird das Overlay nicht gelöscht, sondern lediglich von der Karte entfernt. Wenn Sie es löschen möchten, müssen Sie es von der Karte entfernen und dann auf null setzen.
function removeOverlay() {
historicalOverlay.setMap(null);
}