소개
오버레이는 위도/경도 좌표에 연결되어 지도를 드래그하거나 확대/축소할 때 이동하는 지도상의 객체입니다. 지도에 이미지를 배치하려면 GroundOverlay
객체를 사용하세요.
다른 오버레이 유형에 대한 자세한 내용은 지도에 그리기를 참고하세요.
지면 오버레이 추가
GroundOverlay
의 생성자는 이미지의 URL과 이미지의 LatLngBounds
를 매개변수로 지정합니다. 이미지는 지도의 지정된 경계 내에 렌더링되고 지도의 도법을 사용하여 조정됩니다.
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;
샘플 사용해 보기
지면 오버레이 제거
지도에서 오버레이를 제거하려면 오버레이의 setMap()
메서드를 호출하고 null
을 전달하세요. 이 메서드를 호출해도 오버레이가 삭제되지 않습니다. 지도에서 오버레이가 제거될 뿐입니다. 오버레이를 삭제하려면 지도에서 제거한 다음 오버레이 자체를 null
로 설정해야 합니다.
function removeOverlay() { historicalOverlay.setMap(null); }