WeWeb 프로젝트에서 구글 맵 API를 어떻게 구현하나요?

준비 단계: Google Maps API 키 획득

WeWeb 프로젝트에 Google Maps API를 구현하기 전에 먼저 Google Maps API 키가 필요합니다. 이는 Google Cloud Platform에서 얻을 수 있습니다. 이는 다음과 같이 실행할 수 있습니다:

• Google Cloud Platform 콘솔로 이동합니다 https://console.cloud.google.com/

• Google 계정이 없다면 하나를 만드셔야 합니다. 이미 있으면 로그인합니다.

• 로그인한 후에 우측 상단의 "프로젝트 선택"을 클릭한 다음, 나타난 모달의 우측 상단에 "새 프로젝트"를 클릭합니다.

• 프로젝트명을 지정하고 "생성"을 클릭합니다.

• 프로젝트가 준비되면 왼쪽 사이드바의 "대시보드"를 선택합니다.

• 상단의 "API 및 서비스 사용 설정"을 클릭합니다.

• 다음 화면에서 검색창에 "Maps"를 타이핑하고 "Maps JavaScript API"를 선택합니다.

• "사용 설정"을 클릭합니다.

• API가 활성화된 후, 왼쪽 사이드바에서 "인증 정보"를 클릭합니다.

• 상단의 "인증 정보 만들기"를 클릭하고 "API 키"를 선택합니다.

• API 키가 생성되며 표시됩니다. 무단 사용을 막기 위해 이 API가 사용될 도메인을 추가하고 HTTP 리퍼러에 제한을 두어야 합니다.

API 키를 비공개로 안전하게 보관하십시오.

첫 번째 단계: WeWeb 프로젝트 시작

아직 하지 않았다면, 새로운 WeWeb 프로젝트를 시작하거나 Google Maps API를 구현하려는 기존 프로젝트를 엽니다.

두 번째 단계: 웹페이지에 HTML 박스 추가

WeWeb에서, 맵을 임베드하려는 페이지로 이동하고, 맵을 담을 HTML 박스를 추가합니다. 다음과 같이 실행합니다:

• 위젯 카탈로그를 열기 위해 도구 모음에서 "+" 버튼을 클릭합니다.

• 원하는 위치에 HTML 박스를 드래그 앤 드랍합니다.

세 번째 단계: Google Maps API 임베드

HTML 박스에서 Google Maps API를 호출하는 코드를 작성합니다. 다음과 같이 실행합니다:

• 왼쪽 사이드바의 설정 옵션을 열기 위해 새로 만든 HTML 박스를 클릭합니다.

• "CUSTOM HTML" 필드에 다음의 코드를 입력합니다:

<div id="map"></div>

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

'YOUR_API_KEY'를 Google Cloud Platform에서 얻은 API 키로 교체합니다.

코드 스니펫의 위도와 경도 값은 맵에 표시될 초기 위치에 해당합니다. 필요한 값으로 변경하실 수 있습니다.

네 번째 단계: 맵 스타일링

"CUSTOM HTML" 필드에서 CSS를 추가하여 맵의 크기와 모습을 스타일링할 수 있습니다. 예를 들어, 맵이 전체 화면의 너비를 채우게 하고 특정 높이를 설정하려면 다음 코드를 추가할 수 있습니다:

<style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>

다섯 번째 단계: 저장하고 맵 보기

화면 상단의 "미리보기" 버튼을 클릭하여 프로젝트를 저장하고 맵을 확인합니다.

Google 맵이 이제 웹사이트에 표시됩니다. Google Maps JavaScript API에서 제공하는 다양한 기능과 기능성을 활용하여 맵을 필요에 맞게 사용자 정의하실 수 있습니다.