1. Google Map 생성영역 생성
Google Map 생성을 위한 HTML 영역을 생성하는 방법에 대해 알아보겠습니다.
개발하기
Google Map을 표시하기 위해서는 HTML 내에 <div> 태그를 사용하여 지도가 나타날 영역을 정의해야 합니다. Flextudio에서는 이를 위해 Embed 컨트롤을 사용하여 HTML 코드를 직접 삽입할 수 있습니다.
Embed 컴포넌트 생성
레이아웃에 Embed 컴포넌트를 추가하여 HTML 코드 삽입을 위한 영역을 생성해줍니다.
Embed 컨트롤의 기본 높이는 100px입니다. Google Map을 적절히 표시하기 위해 이 높이를 300px로 변경합니다.
HTML 코드 삽입
Embed 컴포넌트의 Embed HTML 속성에 아래와 같이 HTML 코드를 삽입합니다. 이 <div>는 Google Map이 표시될 컨테이너로 사용됩니다.
<div>태그에style="width:100%; height:100%;"를 추가하여, Embed 컨트롤의 전체 크기에 맞춰 지도가 영역을 완전히 채울 수 있도록 합니다.
챕터 마무리
배운 내용
Embed 컴포넌트를 활용하여 HTML요소를 추가하는 방법을 배웠습니다.
다음 챕터에서는?
외부 Script 로드하기를 통한 API 스크립트를 로드하는 방법에 대해 알아봅니다.
현재 위치정보(GPS)를 가져오는 방법에 대해 알아봅니다.
현재 위치정보를 기반으로 지도를 생성하는 방법에 대해 알아봅니다.
Last updated
