Map 클래스
google.maps.Map
클래스
이 클래스는 MVCObject
를 확장합니다.
const {Map} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
Map |
Map(mapDiv[, opts]) 매개변수:
지정된 HTML 컨테이너 내부에 새 지도를 만듭니다. 일반적으로 DIV 요소입니다. |
상수 | |
---|---|
DEMO_MAP_ID |
지도 ID가 필요한 코드 샘플에 사용할 수 있는 지도 ID. 이 지도 ID는 프로덕션 애플리케이션에서 사용할 수 없으며 클라우드 구성 (예: 클라우드 스타일 지정)이 필요한 기능에 사용할 수 없습니다. |
속성 | |
---|---|
controls |
유형:
Array<MVCArray<HTMLElement>> 지도에 연결할 추가 컨트롤입니다. 지도에 컨트롤을 추가하려면 렌더링해야 하는 ControlPosition 에 상응하는 MVCArray 에 컨트롤의 <div> 를 추가합니다. |
data |
유형:
Data 지도에 바인딩된 Data 의 인스턴스 이 Data 객체에 지형지물을 추가하여 이 지도에 편리하게 표시합니다. |
mapTypes |
유형:
MapTypeRegistry 문자열 ID별 MapType 인스턴스의 레지스트리입니다. |
overlayMapTypes |
오버레이에 대한 추가 지도 유형입니다. 오버레이 지도 유형은 연결된 기본 지도 위에 overlayMapTypes 배열에 표시되는 순서대로 표시됩니다 (색인 값이 더 큰 오버레이가 색인 값이 더 작은 오버레이 앞에 표시됩니다). |
방법 | |
---|---|
fitBounds |
fitBounds(bounds[, padding]) 매개변수:
반환 값: 없음
지정한 경계를 포함하도록 뷰포트를 설정합니다. 참고: 지도를 display: none 로 설정하면 fitBounds 함수는 지도의 크기를 0x0으로 읽으므로 아무 작업도 하지 않습니다. 지도가 숨겨진 상태에서 표시 영역을 변경하려면 지도를 visibility: hidden 로 설정하여 지도 div에 실제 크기가 적용되도록 합니다. 벡터 지도의 경우 이 메서드는 지도의 기울기 및 방향을 기본값인 0으로 설정합니다. 이 메서드를 호출하면 지도가 경계에 맞게 화면 이동 및 확대/축소될 때 애니메이션이 부드러워질 수 있습니다. 이 메서드의 애니메이션 처리 여부는 내부 휴리스틱에 따라 달라집니다. |
getBounds |
getBounds() 매개변수: 없음
반환 값:
LatLngBounds|undefined 현재 표시 영역의 위도/경도 경계.현재 뷰포트의 lat/lng 경계를 반환합니다. 전 세계의 사본이 두 개 이상 표시되는 경우 경계의 경도 범위는 -180도 이상 180도 이하입니다. 지도가 아직 초기화되지 않았거나 중앙 및 확대/축소가 설정되지 않은 경우 결과는 undefined 입니다. 0이 아닌 기울기 또는 방향이 있는 벡터 지도의 경우 반환된 위도/경도 경계는 지도 뷰포트의 표시 영역을 포함하는 최소 경계 상자를 나타냅니다. 지도 표시 영역의 정확한 표시 영역을 가져오려면 MapCanvasProjection.getVisibleRegion 를 참고하세요. |
getCenter |
getCenter() 매개변수: 없음
반환 값:
LatLng|undefined |
getClickableIcons |
getClickableIcons() 매개변수: 없음
반환 값:
boolean|undefined 지도 아이콘의 클릭 가능 여부를 반환합니다. 지도 아이콘은 관심 장소(POI)를 나타냅니다. 반환된 값이 true 이면 지도에서 아이콘을 클릭할 수 있습니다. |
getDatasetFeatureLayer |
getDatasetFeatureLayer(datasetId) 매개변수:
반환 값:
FeatureLayer 지정된 datasetId 의 FeatureLayer 를 반환합니다. 데이터 세트 ID는 Google Cloud 콘솔에서 구성해야 합니다. 데이터 세트 ID가 지도의 지도 스타일과 연결되지 않거나 데이터 기반 스타일 지정을 사용할 수 없는 경우 (지도 ID 없음, 벡터 타일 없음, 데이터 기반 스타일 지정 지형지물 레이어 또는 지도 스타일에서 구성된 데이터 세트 없음) 오류가 로깅되고 결과 FeatureLayer.isAvailable 는 false가 됩니다. |
getDiv |
getDiv() 매개변수: 없음
반환 값:
HTMLElement 지도의 mapDiv입니다. |
getFeatureLayer |
getFeatureLayer(featureType) 매개변수:
반환 값:
FeatureLayer 특정 FeatureType 의 FeatureLayer 를 반환합니다. Google Cloud 콘솔에서 FeatureLayer 를 사용 설정해야 합니다. 지정된 FeatureType 의 FeatureLayer 가 이 지도에 없거나 데이터 기반 스타일 지정을 사용할 수 없는 경우 (지도 ID, 벡터 타일이 없고 지도 스타일에 사용 설정된 FeatureLayer 가 없는 경우) 오류가 로깅되고 결과 FeatureLayer.isAvailable 는 false가 됩니다. |
getHeading |
getHeading() 매개변수: 없음
반환 값:
number|undefined 지도의 나침반 방향을 반환합니다. 방향 값은 기본 방위 북쪽에서 시계 방향으로 도 단위로 측정됩니다. 지도가 아직 초기화되지 않은 경우 결과는 undefined 입니다. |
getMapCapabilities |
getMapCapabilities() 매개변수: 없음
반환 값:
MapCapabilities 제공된 지도 ID를 기반으로 지도에서 사용할 수 있는 현재 기능을 호출자에게 알립니다. |
getMapTypeId |
getMapTypeId() 매개변수: 없음
반환 값:
MapTypeId|string|undefined |
getProjection |
getProjection() 매개변수: 없음
반환 값:
Projection|undefined 현재 Projection 를 반환합니다. 지도가 아직 초기화되지 않은 경우 결과는 undefined 입니다. projection_changed 이벤트를 수신 대기하고 값을 확인하여 undefined 가 아닌지 확인합니다. |
getRenderingType |
getRenderingType() 매개변수: 없음
반환 값:
RenderingType 지도의 현재 RenderingType을 반환합니다. |
getStreetView |
getStreetView() 매개변수: 없음
반환 값:
StreetViewPanorama 지도에 바인딩된 파노라마입니다.지도에 바인딩된 기본 StreetViewPanorama 를 반환합니다. 이 파노라마는 지도 내에 삽입된 기본 파노라마이거나 setStreetView() 를 사용하여 설정된 파노라마일 수 있습니다. 지도의 streetViewControl 를 변경하면 바인딩된 파노라마의 표시에 반영됩니다. |
getTilt |
getTilt() 매개변수: 없음
반환 값:
number|undefined 표시 영역 면에서 지도 면까지의 현재 지도의 입사각을 도 단위로 반환합니다. 래스터 지도의 경우 직접 위에서 찍은 이미지의 경우 0 , 45° 이미지의 경우 45 이 반환됩니다. 이 메서드는 setTilt 에서 설정된 값을 반환하지 않습니다. 자세한 내용은 setTilt 페이지를 참고하세요. |
getZoom |
getZoom() 매개변수: 없음
반환 값:
number|undefined 지도의 확대/축소를 반환합니다. 확대/축소가 설정되지 않은 경우 결과는 undefined 입니다. |
moveCamera |
moveCamera(cameraOptions) 매개변수:
반환 값: 없음
애니메이션 없이 즉시 지도의 카메라를 대상 카메라 옵션으로 설정합니다. |
panBy |
panBy(x, y) 매개변수:
반환 값: 없음
지도의 중심을 지정한 거리만큼 변경합니다(픽셀 단위). 거리가 지도의 너비와 높이보다 작은 경우 전환이 부드럽게 애니메이션됩니다. 지도 좌표계는 x 값의 경우 서쪽에서 동쪽으로, y 값의 경우 북쪽에서 남쪽으로 증가합니다. |
panTo |
panTo(latLng) 매개변수:
반환 값: 없음
지도의 중심을 지정된 LatLng 로 변경합니다. 변경값이 지도의 너비와 높이보다 작은 경우 전환이 부드럽게 애니메이션됩니다. |
panToBounds |
panToBounds(latLngBounds[, padding]) 매개변수:
반환 값: 없음
지정된 LatLngBounds 를 포함하는 데 필요한 최소 양만큼 지도를 화면 이동합니다. 지도에서 경계가 어디에 있는지 보장하지는 않습니다. 단, {currentMapSizeInPx} - {padding} 내에서 최대한 많은 경계를 표시하기 위해 지도가 화면 이동합니다. 래스터 및 벡터 지도에서 모두 지도의 확대/축소, 기울기 및 방향은 변경되지 않습니다. |
setCenter |
setCenter(latlng) 매개변수:
반환 값: 없음
|
setClickableIcons |
setClickableIcons(value) 매개변수:
반환 값: 없음
지도 아이콘을 클릭할 수 있는지 여부를 제어합니다. 지도 아이콘은 관심 장소(POI)를 나타냅니다. 지도 아이콘의 클릭 가능 여부를 사용 중지하려면 이 메서드에 false 값을 전달합니다. |
setHeading |
setHeading(heading) 매개변수:
반환 값: 없음
기본 방향 북쪽에서 도 단위로 측정된 지도의 나침반 방향을 설정합니다. 래스터 지도의 경우 이 방법은 항공 사진에만 적용됩니다. |
setMapTypeId |
setMapTypeId(mapTypeId) 매개변수:
반환 값: 없음
|
setOptions |
setOptions(options) 매개변수:
반환 값: 없음
|
setStreetView |
setStreetView(panorama) 매개변수:
반환 값: 없음
StreetViewPanorama 를 지도에 바인딩합니다. 이 파노라마는 지도가 지도 외부의 외부 파노라마에 바인딩되도록 기본 StreetViewPanorama 를 재정의합니다. 파노라마를 null 로 설정하면 삽입된 기본 파노라마가 다시 지도에 바인딩됩니다. |
setTilt |
setTilt(tilt) 매개변수:
반환 값: 없음
벡터 지도의 경우 지도의 투사각을 설정합니다. 허용되는 값은 지도의 확대/축소 수준에 따라 제한됩니다. 래스터 지도의 경우 지도의 입사각에 대한 자동 전환 동작을 제어합니다. 허용되는 값은 0 및 45 뿐입니다. setTilt(0) : 확대/축소 수준 및 표시 영역과 관계없이 지도에서 항상 0° 오버헤드 뷰를 사용합니다. setTilt(45) 를 사용하면 현재 확대/축소 수준 및 표시 영역에 45° 이미지를 사용할 수 있을 때마다 기울기 각도가 45°로 자동 전환되고 45° 이미지를 사용할 수 없는 경우에는 다시 0으로 전환됩니다 (기본 동작). 45° 이미지는 일부 위치의 일부 확대/축소 수준에서 satellite 및 hybrid 지도 유형에서만 사용할 수 있습니다. 참고: getTilt 는 setTilt 로 설정된 값이 아닌 현재 기울기 각도를 반환합니다. getTilt 와 setTilt 는 서로 다른 것을 참조하므로 tilt 속성을 bind() 하지 마세요. 그렇게 하면 예측할 수 없는 효과가 발생할 수 있습니다. |
setZoom |
setZoom(zoom) 매개변수:
반환 값: 없음
지도의 확대/축소를 설정합니다. |
상속됨:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
이벤트 | |
---|---|
bounds_changed |
function() 인수: 없음
이 이벤트는 표시 영역 경계가 변경되면 시작됩니다. |
center_changed |
function() 인수: 없음
이 이벤트는 지도 중심 속성이 변경되면 시작됩니다. |
click |
function(event) 인수:
이 이벤트는 사용자가 지도를 클릭하면 시작됩니다. 클릭된 위치에 대한 속성이 있는 MapMouseEvent는 장소 아이콘을 클릭하지 않는 한 반환됩니다. 이 경우 장소 ID가 있는 IconMouseEvent가 반환됩니다. IconMouseEvent 및 MapMouseEvent는 IconMouseEvent에 장소 ID 필드가 있다는 점을 제외하고 동일합니다. 장소 ID가 중요하지 않은 경우 이벤트를 항상 MapMouseEvent로 취급할 수 있습니다. 마커나 정보 창을 클릭하면 클릭 이벤트가 시작되지 않습니다. |
contextmenu |
function(event) 인수:
이 이벤트는 지도 컨테이너에서 DOM contextmenu 이벤트가 시작되면 시작됩니다. |
dblclick |
function(event) 인수:
이 이벤트는 사용자가 지도를 더블클릭하면 시작됩니다. 클릭 이벤트가 이 이벤트 직전에 한 번 또는 두 번 실행되는 경우도 있습니다. |
drag |
function() 인수: 없음
이 이벤트는 사용자가 지도를 드래그하는 동안 반복하여 시작됩니다. |
dragend |
function() 인수: 없음
이 이벤트는 사용자가 지도 드래그를 중지하면 시작됩니다. |
dragstart |
function() 인수: 없음
이 이벤트는 사용자가 지도 드래그를 시작하면 시작됩니다. |
heading_changed |
function() 인수: 없음
이 이벤트는 지도 방위 속성이 변경되면 시작됩니다. |
idle |
function() 인수: 없음
이 이벤트는 이동이나 확대/축소 후 지도가 유휴 상태가 되면 시작됩니다. |
isfractionalzoomenabled_changed |
function() 인수: 없음
이 이벤트는 isFractionalZoomEnabled 속성이 변경되면 시작됩니다. |
mapcapabilities_changed |
function() 인수: 없음
이 이벤트는 지도 기능이 변경되면 시작됩니다. |
maptypeid_changed |
function() 인수: 없음
이 이벤트는 mapTypeId 속성이 변경되면 시작됩니다. |
mousemove |
function(event) 인수:
이 이벤트는 사용자의 마우스가 지도 컨테이너로 이동하면 시작됩니다. |
mouseout |
function(event) 인수:
이 이벤트는 사용자의 마우스가 지도 컨테이너를 빠져나가면 시작됩니다. |
mouseover |
function(event) 인수:
이 이벤트는 사용자의 마우스가 지도 컨테이너로 들어가면 시작됩니다. |
projection_changed |
function() 인수: 없음
이 이벤트는 투영이 변경되면 시작됩니다. |
renderingtype_changed |
function() 인수: 없음
이 이벤트는 렌더링 유형이 변경되면 시작됩니다. |
tilesloaded |
function() 인수: 없음
이 이벤트는 표시된 타일 로드가 완료되면 시작됩니다. |
tilt_changed |
function() 인수: 없음
이 이벤트는 지도 기울기 속성이 변경되면 시작됩니다. |
zoom_changed |
function() 인수: 없음
이 이벤트는 지도 확대/축소 속성이 변경되면 시작됩니다. |
|
function(event) 인수:
이 이벤트는 사용자가 지도를 마우스 오른쪽 버튼으로 클릭하면 시작됩니다. |
MapOptions 인터페이스
google.maps.MapOptions
인터페이스
지도에 설정할 수 있는 속성을 정의하는 데 사용되는 MapOptions 객체.
속성 | |
---|---|
backgroundColor optional |
유형:
string optional 지도 div의 배경에 사용되는 색상입니다. 이 색상은 사용자가 이동할 때 타일이 아직 로드되지 않은 경우 표시됩니다. 이 옵션은 지도가 초기화될 때만 설정할 수 있습니다. |
center optional |
유형:
LatLng|LatLngLiteral optional 초기 지도 중심입니다. |
clickableIcons optional |
유형:
boolean optional 기본값:
true false 인 경우 지도 아이콘을 클릭할 수 없습니다. 지도 아이콘은 관심 장소(POI)를 나타냅니다. |
controlSize optional |
유형:
number optional 지도에 표시되는 컨트롤의 크기(픽셀)입니다. 이 값은 지도를 만들 때 직접 제공해야 하며, 나중에 이 값을 업데이트하면 컨트롤이 undefined 상태가 될 수 있습니다. 지도 API 자체에서 만든 컨트롤에만 적용됩니다. 개발자가 만든 맞춤 컨트롤을 확장하지 않습니다. |
disableDefaultUI optional |
유형:
boolean optional 모든 기본 UI 버튼을 사용 설정/사용 중지합니다. 개별적으로 재정의할 수 있습니다. MapOptions.keyboardShortcuts 옵션으로 별도로 제어되는 키보드 컨트롤을 사용 중지하지 않습니다. MapOptions.gestureHandling 옵션으로 별도로 제어되는 동작 컨트롤이 사용 중지되지 않습니다. |
disableDoubleClickZoom optional |
유형:
boolean optional 더블클릭 시 확대/축소 및 중앙 배치를 활성화/비활성화합니다. 기본적으로 사용 설정되어 있습니다. 참고: 이 속성은 권장하지 않습니다. 더블클릭 시 확대/축소를 사용 중지하려면 |
|
유형:
boolean optional false 인 경우 지도가 드래그되지 않습니다. 드래그는 기본적으로 사용 설정되어 있습니다. |
draggableCursor optional |
유형:
string optional 드래그 가능한 지도 위에 마우스를 올려놓을 때 표시할 커서의 이름 또는 URL입니다. 이 속성은 CSS cursor 속성을 사용하여 아이콘을 변경합니다. css 속성과 마찬가지로 URL이 아닌 대체 커서를 하나 이상 지정해야 합니다. 예를 들면 draggableCursor: 'url(http://www.example.com/icon.png), auto;' 입니다. |
draggingCursor optional |
유형:
string optional 지도를 드래그할 때 표시할 커서의 이름 또는 URL입니다. 이 속성은 CSS cursor 속성을 사용하여 아이콘을 변경합니다. css 속성과 마찬가지로 URL이 아닌 대체 커서를 하나 이상 지정해야 합니다. 예를 들면 draggingCursor: 'url(http://www.example.com/icon.png), auto;' 입니다. |
fullscreenControl optional |
유형:
boolean optional 전체 화면 컨트롤의 사용 설정/사용 중지 상태입니다. |
fullscreenControlOptions optional |
유형:
FullscreenControlOptions optional 전체 화면 컨트롤의 표시 옵션입니다. |
gestureHandling optional |
유형:
string optional 이 설정은 API가 지도에서 동작을 처리하는 방법을 제어합니다. 허용되는 값:
|
heading optional |
유형:
number optional 기본 방위 북쪽에서 시계 방향으로 도 단위로 측정된 항공 사진의 방향입니다. 방향은 이미지를 표시할 수 있는 가장 가까운 사용 가능한 각도에 맞춰집니다. |
isFractionalZoomEnabled optional |
유형:
boolean optional 기본값: 벡터 지도의 경우
true , 래스터 지도의 경우 false 지도에서 부분 확대/축소 수준을 허용할지 여부입니다. isfractionalzoomenabled_changed 를 수신하여 기본값이 설정되었는지 확인합니다. |
keyboardShortcuts optional |
유형:
boolean optional false 인 경우 키보드로 지도를 제어할 수 없습니다. 단축키는 기본적으로 사용 설정되어 있습니다. |
mapId optional |
유형:
string optional 지도의 지도 ID입니다. 지도를 인스턴스화한 후에는 이 매개변수를 설정하거나 변경할 수 없습니다. |
mapTypeControl optional |
유형:
boolean optional 지도 유형 컨트롤의 초기 활성화/비활성화 상태입니다. |
mapTypeControlOptions optional |
유형:
MapTypeControlOptions optional 지도 유형 컨트롤의 초기 표시 옵션입니다. |
mapTypeId optional |
유형:
MapTypeId|string optional 초기 지도 mapTypeId입니다. 기본값은 ROADMAP 입니다. |
maxZoom optional |
유형:
number optional 지도에 표시될 최대 줌레벨입니다. 생략하거나 null 로 설정하면 현재 지도 유형의 최대 확대/축소가 대신 사용됩니다. 유효한 확대/축소 값은 0부터 지원되는 최대 확대/축소 수준까지의 숫자입니다. |
minZoom optional |
유형:
number optional 지도에 표시될 최소 줌레벨입니다. 생략하거나 null 로 설정하면 현재 지도 유형의 최소 확대/축소가 대신 사용됩니다. 유효한 확대/축소 값은 0부터 지원되는 최대 확대/축소 수준까지의 숫자입니다. |
noClear optional |
유형:
boolean optional true 인 경우 지도 div의 콘텐츠를 지우지 않습니다. |
|
유형:
boolean optional 화면 이동 컨트롤의 활성화/비활성화 상태입니다. |
|
유형:
PanControlOptions optional 화면 이동 컨트롤의 표시 옵션입니다. |
restriction optional |
유형:
MapRestriction optional 사용자가 액세스할 수 있는 지도 영역을 제한하는 경계를 정의합니다. 이 옵션을 설정하면 카메라 뷰가 경계 범위 내에 있는 동안만 사용자가 화면 이동 및 확대/축소할 수 있습니다. |
rotateControl optional |
유형:
boolean optional 회전 컨트롤의 활성화/비활성화 상태입니다. |
rotateControlOptions optional |
유형:
RotateControlOptions optional 회전 컨트롤의 표시 옵션입니다. |
scaleControl optional |
유형:
boolean optional 축척 컨트롤의 초기 활성화/비활성화 상태입니다. |
scaleControlOptions optional |
유형:
ScaleControlOptions optional 축척 컨트롤의 초기 표시 옵션입니다. |
scrollwheel optional |
유형:
boolean optional false 인 경우 마우스 스크롤 휠을 사용하여 지도 확대/축소를 사용 중지합니다. 스크롤휠은 기본적으로 사용하도록 설정됩니다. 참고: 이 속성은 권장하지 않습니다. 스크롤휠을 사용한 확대/축소를 사용 중지하려면 |
streetView optional |
유형:
StreetViewPanorama optional 스트리트 뷰 페그맨이 지도에 드롭되면 표시할 StreetViewPanorama 입니다. 파노라마를 지정하지 않으면 페그맨이 드롭될 때 기본 StreetViewPanorama 가 지도의 div 에 표시됩니다. |
streetViewControl optional |
유형:
boolean optional 스트리트 뷰 pegman 컨트롤의 초기 활성화/비활성화 상태입니다. 이 컨트롤은 기본 UI의 일부이며 스트리트 뷰 도로 오버레이가 표시되면 안 되는 지도 유형 (예: 어스가 아닌 지도 유형)을 표시할 때 false 로 설정해야 합니다. |
streetViewControlOptions optional |
유형:
StreetViewControlOptions optional 스트리트 뷰 pegman 컨트롤의 초기 표시 옵션입니다. |
styles optional |
유형:
Array<MapTypeStyle> optional 각 기본 지도 유형에 적용할 스타일 satellite /hybrid 및 terrain 모드의 경우 이러한 스타일은 라벨 및 도형에만 적용됩니다. |
tilt optional |
유형:
number optional 벡터 지도의 경우 지도의 투사각을 설정합니다. 허용되는 값은 지도의 확대/축소 수준에 따라 제한됩니다. 래스터 지도의 경우 지도의 입사각에 대한 자동 전환 동작을 제어합니다. 허용되는 값은 0 및 45 뿐입니다. 값이 0 이면 확대/축소 수준 및 표시 영역에 관계없이 지도에서 항상 0° 오버헤드 뷰를 사용합니다. 값 45 을 사용하면 현재 확대/축소 수준 및 표시 영역에 45° 이미지를 사용할 수 있을 때마다 기울기 각도가 45로 자동 전환되고 45° 이미지를 사용할 수 없을 때는 0으로 다시 전환됩니다 (기본 동작). 45° 이미지는 일부 위치의 일부 확대/축소 수준에서 satellite 및 hybrid 지도 유형에서만 사용할 수 있습니다. 참고: getTilt 는 이 옵션에서 지정된 값이 아닌 현재 기울기 각도를 반환합니다. getTilt 와 이 옵션은 서로 다른 것을 참조하므로 tilt 속성을 bind() 하면 예기치 않은 결과가 발생할 수 있습니다. |
zoom optional |
유형:
number optional 초기 지도 확대/축소 수준입니다. 유효한 확대/축소 값은 0부터 지원되는 최대 확대/축소 수준까지의 숫자입니다. 확대/축소 값이 클수록 해상도가 높아집니다. |
zoomControl optional |
유형:
boolean optional 확대/축소 컨트롤의 활성화/비활성화 상태입니다. |
zoomControlOptions optional |
유형:
ZoomControlOptions optional 확대/축소 컨트롤의 표시 옵션입니다. |
MapElement 클래스
google.maps.MapElement
클래스
MapElement는 지도 렌더링을 위한 HTMLElement
서브클래스입니다. maps
라이브러리를 로드한 후 HTML로 지도를 만들 수 있습니다. 예:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
<button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>
내부적으로
Map
를 사용하며 이는 innerMap
속성으로 액세스할 수 있습니다.
맞춤 요소:
<gmp-map center="lat,lng" map-id="string" zoom="number"></gmp-map>
이 클래스는 HTMLElement
를 확장합니다.
이 클래스는 MapElementOptions
를 구현합니다.
const {MapElement} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
MapElement |
MapElement([options]) 매개변수:
|
속성 | |
---|---|
center |
유형:
LatLng|LatLngLiteral optional 지도의 중앙 위도/경도입니다.
HTML 속성:
|
innerMap |
유형:
Map MapElement가 내부적으로 사용하는 Map 의 참조입니다. |
mapId |
유형:
string optional 지도의 지도 ID입니다. 자세한 내용은 지도 ID 문서를 참고하세요.
HTML 속성:
|
zoom |
유형:
number optional 지도의 줌레벨입니다.
HTML 속성:
|
방법 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 대상에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참조하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참조하세요. |
이벤트 | |
---|---|
gmp-zoomchange |
function(event) 인수:
이 이벤트는 지도 확대/축소 속성이 변경되면 시작됩니다. |
MapElementOptions 인터페이스
google.maps.MapElementOptions
인터페이스
MapElement에 설정 가능한 속성을 정의하는 데 사용되는 MapElementOptions 객체.
속성 | |
---|---|
center optional |
유형:
LatLng|LatLngLiteral optional 초기 지도 중심입니다. |
mapId optional |
유형:
string optional 지도의 지도 ID입니다. 지도를 인스턴스화한 후에는 이 매개변수를 설정하거나 변경할 수 없습니다. |
zoom optional |
유형:
number optional 초기 지도 확대/축소 수준입니다. 유효한 확대/축소 값은 0부터 지원되는 최대 확대/축소 수준까지의 숫자입니다. 확대/축소 값이 클수록 해상도가 높아집니다. |
ZoomChangeEvent 클래스
google.maps.ZoomChangeEvent
클래스
이 이벤트는 확대/축소 변경을 모니터링하여 생성됩니다.
이 클래스는 Event
를 확장합니다.
const {ZoomChangeEvent} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
MapTypeStyle 인터페이스
google.maps.MapTypeStyle
인터페이스
MapTypeStyle
은 지도의 스타일을 지정하는 방식을 정의하는 선택기와 스타일러의 모음입니다. 선택기는 영향을 받아야 하는 지도 지형지물 및 요소를 지정하고, 스타일러는 이러한 지형지물과 요소를 수정하는 방법을 지정합니다. 자세한 내용은 스타일 참조를 참고하세요.
속성 | |
---|---|
stylers |
선택한 지도 지형지물 및 요소에 적용할 스타일 규칙입니다. 규칙은 이 배열에 지정한 순서대로 적용됩니다. 사용 및 허용되는 값에 대한 가이드라인은 스타일 참조를 확인하세요. |
elementType optional |
유형:
string optional 스타일러를 적용해야 하는 요소입니다. 요소는 지도에 있는 지형지물의 시각적인 측면입니다. 예: 라벨, 아이콘, 도형에 적용된 획 또는 채우기 등이 있습니다. 선택사항입니다. elementType 을 지정하지 않으면 값이 'all' 인 것으로 간주됩니다. 사용법 및 허용되는 값에 대한 자세한 내용은 스타일 참조를 참고하세요. |
featureType optional |
유형:
string optional 스타일러를 적용해야 하는 지형지물 또는 지형지물 그룹입니다. 선택사항입니다. featureType 을 지정하지 않으면 값이 'all' 인 것으로 간주됩니다. 사용법 및 허용되는 값에 대한 자세한 내용은 스타일 참조를 참고하세요. |
MapMouseEvent 인터페이스
google.maps.MapMouseEvent
인터페이스
이 객체는 지도와 오버레이의 다양한 마우스 이벤트에서 반환되며 아래 표시된 필드를 모두 포함합니다.
속성 | |
---|---|
domEvent |
해당하는 네이티브 DOM 이벤트입니다. 개발자는 target , currentTarget , relatedTarget , path 속성을 정의하고 일관되게 사용해서는 안 됩니다. 또한 개발자는 지도 API의 내부 구현에서 DOM 구조에 의존해서는 안 됩니다. 내부 이벤트 매핑으로 인해 domEvent 는 MapMouseEvent 와 다른 의미 체계를 가질 수 있습니다 (예: MapMouseEvent '클릭'에는 KeyboardEvent 유형의 domEvent 가 있을 수 있음). |
latLng optional |
유형:
LatLng optional 이벤트가 발생했을 때 커서 아래에 있는 위도/경도입니다. |
방법 | |
---|---|
stop |
stop() 매개변수: 없음
반환 값:
void 이 이벤트가 더 이상 전파되지 않도록 합니다. |
IconMouseEvent 인터페이스
google.maps.IconMouseEvent
인터페이스
이 객체는 사용자가 지도의 아이콘을 클릭하면 이벤트에서 전송됩니다. 이 장소의 장소 ID는 placeId 멤버에 저장됩니다. 기본 정보 창이 표시되지 않도록 하려면 이 이벤트에 대해 stop() 메서드를 호출하여 정보 창이 전파되지 않도록 하세요. Places API 개발자 가이드에서 장소 ID에 대해 자세히 알아보세요.
이 인터페이스는 MapMouseEvent
를 확장합니다.
속성 | |
---|---|
placeId optional |
유형:
string optional 클릭된 장소의 장소 ID입니다. 이 장소 ID는 클릭된 지형지물에 대한 자세한 정보를 쿼리하는 데 사용할 수 있습니다. Places API 개발자 가이드에서 장소 ID에 대해 자세히 알아보세요. |
상속됨:
domEvent ,
latLng
|
방법 | |
---|---|
상속됨:
stop
|
MapTypeId 상수
google.maps.MapTypeId
상수
공통 MapTypes에 대한 식별자입니다. 값을 사용하거나 상수 이름을 사용하여 지정합니다. 예를 들면 'satellite'
또는 google.maps.MapTypeId.SATELLITE
이 있습니다.
const {MapTypeId} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
상수 | |
---|---|
HYBRID |
이 지도 유형은 위성 이미지에 있는 주요 거리의 투명 레이어를 표시합니다. |
ROADMAP |
이 지도 유형은 일반 거리 지도를 표시합니다. |
SATELLITE |
이 지도 유형은 위성 이미지를 표시합니다. |
TERRAIN |
이 지도 유형은 지형 및 초목과 같이 물리적인 지형지물이 있는 지도를 표시합니다. |
MapTypeRegistry 클래스
google.maps.MapTypeRegistry
클래스
MapType ID로 키가 지정된 MapType 인스턴스의 레지스트리입니다.
이 클래스는 MVCObject
를 확장합니다.
const {MapTypeRegistry} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
MapTypeRegistry |
MapTypeRegistry() 매개변수: 없음
MapTypeRegistry 는 지도에서 사용할 수 있는 맞춤 지도 유형 컬렉션을 보유합니다. 예를 들어, API는 컨트롤 내에서 사용 가능한 지도 유형 목록을 제공할 때 이 레지스트리를 참조합니다. |
방법 | |
---|---|
set |
set(id, mapType) 매개변수:
반환 값: 없음
전달된 문자열 식별자를 전달된 MapType과 연결하기 위해 레지스트리를 설정합니다. |
상속됨:
addListener ,
bindTo ,
get ,
notify ,
setValues ,
unbind ,
unbindAll
|
MapRestriction 인터페이스
google.maps.MapRestriction
인터페이스
지도에 적용할 수 있는 제한사항입니다. 지도의 표시 영역은 이러한 제한을 초과하지 않습니다.
속성 | |
---|---|
latLngBounds |
이 매개변수를 설정하면 사용자가 지정된 경계 내에서만 화면 이동 및 확대/축소할 수 있습니다. 경계는 경도와 위도를 모두 제한하거나 위도만 제한할 수 있습니다. 위도 전용 경계의 경우 서쪽과 동쪽 경도를 각각 -180과 180으로 사용합니다(예: latLngBounds: {north: northLat, south: southLat, west: -180, east: 180} ). |
strictBounds optional |
유형:
boolean optional strictBounds 플래그를 true 로 설정하여 경계를 더 제한할 수 있습니다. 이렇게 하면 사용자가 축소할 수 있는 범위가 줄어들어 제한된 경계 외부의 모든 항목이 숨겨진 상태로 유지됩니다. 기본값은 false 입니다. 즉, 사용자는 제한된 영역 전체가 표시될 때까지 축소할 수 있으며 여기에는 제한된 영역 외부의 영역도 포함될 수 있습니다. |
TrafficLayer 클래스
google.maps.TrafficLayer
클래스
교통정보 레이어입니다.
이 클래스는 MVCObject
를 확장합니다.
const {TrafficLayer} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
TrafficLayer |
TrafficLayer([opts]) 매개변수:
현재 도로 교통정보를 표시하는 레이어입니다. |
방법 | |
---|---|
getMap |
getMap() 매개변수: 없음
반환 값:
Map 이 레이어가 표시되는 지도를 반환합니다. |
setMap |
setMap(map) 매개변수:
반환 값: 없음
지정된 지도에서 레이어를 렌더링합니다. 지도를 null 로 설정하면 레이어가 삭제됩니다. |
setOptions |
setOptions(options) 매개변수:
반환 값: 없음
|
상속됨:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
TrafficLayerOptions 인터페이스
google.maps.TrafficLayerOptions
인터페이스
TrafficLayer에 설정할 수 있는 속성을 정의하는 데 사용되는 TrafficLayerOptions 객체입니다.
속성 | |
---|---|
autoRefresh optional |
유형:
boolean optional 기본값:
true 교통정보 레이어가 업데이트된 정보로 자동 새로고침되는지 여부입니다. |
map optional |
유형:
Map optional 교통정보 레이어를 표시할 지도입니다. |
TransitLayer 클래스
google.maps.TransitLayer
클래스
대중교통 레이어
이 클래스는 MVCObject
를 확장합니다.
const {TransitLayer} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
TransitLayer |
TransitLayer() 매개변수: 없음
대중교통 노선을 표시하는 레이어 |
방법 | |
---|---|
getMap |
getMap() 매개변수: 없음
반환 값:
Map 이 레이어가 표시되는 지도를 반환합니다. |
setMap |
setMap(map) 매개변수:
반환 값: 없음
지정된 지도에서 레이어를 렌더링합니다. 지도를 null 로 설정하면 레이어가 삭제됩니다. |
상속됨:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
BicyclingLayer 클래스
google.maps.BicyclingLayer
클래스
자전거 도로와 경로를 표시하는 레이어입니다.
이 클래스는 MVCObject
를 확장합니다.
const {BicyclingLayer} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
BicyclingLayer |
BicyclingLayer() 매개변수: 없음
자전거 도로와 경로를 표시하고 큰 도로의 순위를 낮추는 레이어입니다. |
방법 | |
---|---|
getMap |
getMap() 매개변수: 없음
반환 값:
Map 이 레이어가 표시되는 지도를 반환합니다. |
setMap |
setMap(map) 매개변수:
반환 값: 없음
지정된 지도에서 레이어를 렌더링합니다. 지도를 null 로 설정하면 레이어가 삭제됩니다. |
상속됨:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
CameraOptions 인터페이스
google.maps.CameraOptions
인터페이스
지도의 카메라 옵션을 설정하는 데 사용됩니다.
속성 | |
---|---|
center optional |
유형:
LatLngLiteral|LatLng optional |
heading optional |
유형:
number optional |
tilt optional |
유형:
number optional |
zoom optional |
유형:
number optional |
VisibleRegion 인터페이스
google.maps.VisibleRegion
인터페이스
지도에 표시되는 영역인 4면 다각형을 정의하는 4개의 점을 포함합니다. 벡터 지도에서 기울기가 있는 경우 벡터 지도에서 이 다각형은 직사각형이 아닌 사다리꼴이 될 수 있습니다.
속성 | |
---|---|
farLeft |
유형:
LatLng |
farRight |
유형:
LatLng |
latLngBounds |
유형:
LatLngBounds 표시되는 영역을 포함하는 가장 작은 경계 상자 |
nearLeft |
유형:
LatLng |
nearRight |
유형:
LatLng |
RenderingType 상수
google.maps.RenderingType
상수
const {RenderingType} = await google.maps.importLibrary("maps")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
상수 | |
---|---|
RASTER |
지도가 래스터 지도임을 나타냅니다. |
UNINITIALIZED |
지도의 초기화가 아직 완료되지 않았으므로 지도가 벡터인지 래스터인지 아직 알 수 없음을 나타냅니다. |
VECTOR |
지도가 벡터 지도임을 나타냅니다. |
MapCapabilities 인터페이스
google.maps.MapCapabilities
인터페이스
현재 지도에서 사용할 수 있는 기능의 스냅샷이 포함된 객체입니다. 이는 관련 모듈이 로드되거나 초기화됨을 의미하는 것이 아니라 현재 지도에 이러한 API를 사용할 권한이 있음을 의미합니다. 가능한 기능 목록은 속성을 참조하세요.
속성 | |
---|---|
isAdvancedMarkersAvailable optional |
유형:
boolean optional true인 경우 이 지도는 고급 마커를 사용할 수 있도록 올바르게 구성됩니다. 고급 마커를 사용하려면 marker 라이브러리를 계속 가져와야 합니다. 자세한 내용은 https://goo.gle/gmp-isAdvancedMarkersAvailable 페이지를 참고하세요. |
isDataDrivenStylingAvailable optional |
유형:
boolean optional true인 경우 이 지도는 하나 이상의 FeatureLayer에 데이터 기반 스타일 지정을 사용할 수 있도록 올바르게 구성됩니다. 자세한 내용은 https://goo.gle/gmp-data-driven-styling 및 https://goo.gle/gmp-FeatureLayerIsAvailable을 참고하세요. |