Google Maps JavaScript API 예제 목록

https://developers.google.com/maps/documentation/javascript/examples

Basics

• 단순 지도
• 픽셀 및 타일 좌표 표시
• 지리 위치 정보
• 지도의 언어 설정
• 오른쪽에서 왼쪽으로 쓰는 언어
• 사용자 지정 지도 투영법
• 위도/경도 객체

Events

• 단순 클릭 이벤트
• 이벤트 리스너에서 클로저 사용하기
• UI 이벤트에서 인수에 접근하기
• 이벤트 핸들러를 사용하여 속성 가져오기
• 클릭 이벤트로부터 위도/경도 가져오기
• DOM 이벤트를 듣기
• POI 클릭 이벤트

Controls and Interaction

• 기본 컨트롤
• 기본 UI 비활성화하기
• 지도에 컨트롤 추가하기
• 컨트롤 옵션
• 컨트롤 위치 설정하기
• 사용자 지정 컨트롤
• 컨트롤에 상태 추가하기
• 협력적 제스처 처리하기

Customize a Map

• 스타일 지도 - 아이디로 지도 스타일 설정하기
• 마커 충돌 관리
• 야간 모드 스타일 지도
• 스타일링 된 지도 타입
• 스타일링으로 지도 기능 숨기기
• 스타일링된 지도 선택

Data-driven styling for boundaries

• 경계 폴리곤 스타일링
• 등치지도 만들기
• 클릭 이벤트 처리하기

Web Components

• 맵 웹 컴포넌트 추가하기
• 마커가 있는 맵 웹 컴포넌트 추가하기
• 이벤트가 있는 맵 웹 컴포넌트 추가하기

Add markers to the Map

고급 마커

• 간단한 고급 마커
• 기본 마커 사용자 정의하기
• 그래픽으로 마커 생성하기
• HTML과 CSS를 이용해 마커 생성하기
• HTML과 CSS를 이용해 상호작용하는 마커 생성하기
• CSS로 마커 애니메이션 만들기
• 마커 충돌 동작 제어하기
• 마커 고도 설정하기
• 줌 레벨에 따른 마커 가시성 제어하기
• 클릭 가능하고 접근 가능한 마커 만들기
• 드래그 가능한 마커 만들기

마커 (레거시)

• 간단한 마커 생성하기
• 마커 라벨 붙이기
• 마커 제거하기
• 간단한 마커 아이콘 만들기
• 복잡한 마커 아이콘 만들기
• SVG와 폰트를 이용한 마커 생성하기
• 마커 접근성 확보하기
• 마커 애니메이션 적용하기
• setTimeout()을 이용한 마커 애니메이션 적용하기

Draw on the Map

• 정보 창
• 최대 너비를 가진 정보 창
• 커스텀 팝업
• 간단한 폴리라인
• 폴리라인 제거하기
• 꼭짓점 삭제하기
• 복잡한 폴리라인
• 간단한 폴리곤
• 폴리곤 배열
• 폴리곤 자동 완성
• 구멍이 있는 폴리곤
• 원
• 사각형
• 사각형 줌
• 사용자 편집 가능한 도형
• 드래그 가능한 폴리곤
• 이벤트 수신하기
• 지면 오버레이
• 오버레이 제거하기
• 커스텀 오버레이
• 미리 정의된 심볼 (마커)
• 커스텀 심볼 (마커)
• 심볼 애니메이션 적용하기
• 화살표 심볼 (폴리라인)
• 커스텀 심볼 (폴리라인)
• 점선 심볼 (폴리라인)

Layers

• KML 레이어
• KML 피처 세부 정보
• 데이터 레이어 : 폴리곤
• 데이터 레이어 : 단순
• 데이터 레이어 : 스타일링
• 데이터 레이어 : 이벤트 처리
• 데이터 레이어 : 동적 스타일링
• 데이터 레이어 : 드래그 앤 드롭 GeoJSON
• 데이터 레이어 : 지진
• 히트맵
• GeoRSS 레이어
• 교통 레이어
• 대중교통 레이어
• 자전거 레이어
• deck.gl ArcLayer
• deck.gl ScatterPlot GeoJsonLayer

Vector Map Features

• WebGL 오버레이 (기본 API)
• WebGL 오버레이 (ThreeJS 래퍼)
• 기울임과 회전

MapTypes

• 기본 맵 타입들
• 오버레이 맵 타입들
• 이미지 맵 타입들
• 이미지 맵 타입 오버레이
• 45° 영상
• 회전하는 45° 영상

Services

• 지오코딩 서비스
• 역지오코딩
• 장소 ID를 이용한 역지오코딩
• 지오코딩 컴포넌트 제한
• 지역 코드 바이어싱 (ES)
• 지역 코드 바이어싱 (US)
• 길찾기 서비스
• setPanel()을 이용한 텍스트 길찾기 표시
• 복잡한 길찾기 서비스
• 길찾기에서의 이동 모드
• 길찾기에서의 경유지
• 드래그 가능한 길찾기
• 거리 행렬 서비스
• 고도 서비스
• 경로 따라 고도 보여주기
• 스트리트 뷰 컨테이너
• 나란히 보는 스트리트 뷰
• 스트리트 뷰 내 오버레이
• 스트리트 뷰 이벤트
• 스트리트 뷰 컨트롤
• 스트리트 뷰 데이터 직접 접근하기
• 커스텀 스트리트 뷰 파노라마
• 커스텀 스트리트 뷰 파노라마 타일
• 최대 줌 이미지 서비스

Libraries: Drawing

• 그리기 도구

Libraries: Geometry

• 내비게이션 함수 (JHeading)
• 인코딩 메소드
• 폴리곤/포인트 관계와 containsLocation()

Places

• 장소 검색
• 장소 세부 정보
• 장소 검색 페이징네이션
• 장소 자동 완성
• 장소 자동 완성 주소 양식
• 호텔 검색에 대한 장소 자동 완성
• 여러 국가로 장소 자동 완성 제한하기
• 장소 검색 박스
• 자동완성 예상치 검색하기
• 장소 ID 찾기
• 역지오코딩으로 장소 ID 위치 찾기