1. Google Map 생성영역 생성

Google Map 생성을 위한 HTML 영역을 생성하는 방법에 대해 알아보겠습니다.

개발하기

Google Map을 표시하기 위해서는 HTML 내에 <div> 태그를 사용하여 지도가 나타날 영역을 정의해야 합니다. Flextudio에서는 이를 위해 Embed 컨트롤을 사용하여 HTML 코드를 직접 삽입할 수 있습니다.

Embed 컴포넌트 생성

1. 그룹에 Embed 컴포넌트를 추가하여 HTML 코드 삽입을 위한 영역을 생성해줍니다.

   
2. Embed 컨트롤의 기본 높이는 100px입니다. Google Map을 적절히 표시하기 위해 이 높이를 300px로 변경합니다.

   

HTML 코드 삽입

Embed 컴포넌트의 Embed HTML 속성에 아래와 같이 HTML 코드를 삽입합니다. 이 <div>는 Google Map이 표시될 컨테이너로 사용됩니다.

• <div> 태그에 style="width:100%; height:100%;"를 추가하여, Embed 컨트롤의 전체 크기에 맞춰 지도가 영역을 완전히 채울 수 있도록 합니다.

<div id="googleMap" style="width:100%; height:100%;"></div>

챕터 마무리

배운 내용

• Embed 컴포넌트를 활용하여 HTML요소를 추가하는 방법을 배웠습니다.

다음 챕터에서는?

• 외부 Script 로드하기를 통한 API 스크립트를 로드하는 방법에 대해 알아봅니다.

• 현재 위치정보(GPS)를 가져오는 방법에 대해 알아봅니다.

• 현재 위치정보를 기반으로 지도를 생성하는 방법에 대해 알아봅니다.