미디어 - 맵

Google Cloud Platform Console(으)로 이동합니다.

프로젝트 드롭다운을 클릭하고 API 키를 추가할 프로젝트를 선택하거나 만듭니다.

API 자격 증명을 구성하려면 Google Maps 설명서의 지침을(를) 따르십시오.

API 키를 클립보드에 복사합니다.

관리자 사이드바에서 Stores > Settings>Configuration(으)로 이동합니다.

General ​아래의 왼쪽 패널에서​ Content Management ​을(를) 선택합니다.

Advanced Content Tools ​을 확장합니다.

콘텐츠 관리 고급 도구 구성 옵션에 대한 자세한 내용은 구성 참조 안내서를 참조하십시오.

Google Maps API Key ​의 경우 1단계에서 복사한 키를 붙여넣습니다.

Test Key ​을(를) 클릭합니다.

키에 문제가 있는 경우 Google Maps 플랫폼 사이트로 돌아가 문제를 해결하십시오. 그런 다음 다시 시도하십시오.

키를 확인한 후 Save Config ​을(를) 클릭합니다.

Page Builder 작업 영역에 대한 페이지, 차단 또는 동적 블록을 엽니다.

Page Builder 패널에서 Media ​을(를) 확장하고 Map 자리 표시자를 스테이지로 드래그합니다.

스토어에 대해 Google Maps 플랫폼이 구성된 경우 스토어 위치에 대한 맵이 나타납니다.

스토어에 대해 Google Maps 플랫폼이 아직 구성되지 않은 경우 대신 자리 표시자 맵이 나타납니다.

맵 컨테이너 위로 마우스를 가져가 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

Edit Map ​페이지의 오른쪽 상단 모서리에서​ Add Location ​을(를) 클릭합니다.

지도에서 PIN과 연결할 Location Name ​을(를) 입력하십시오.

사용자 지정 위치에 사용할 위치 좌표를 수집합니다.

또는 Position 상자에서 표시된 맵의 핀을 끌 수 있습니다.

필요한 경우 새 브라우저 창에서 Google Maps (으)로 이동하여 다음 방법 중 하나를 사용하여 좌표를 가져옵니다.

메서드 1: URL에서 복사

• 왼쪽 상단 모서리에서 Search 상자에 주소를 입력하고 검색( ) 아이콘을 클릭합니다.

• URL에서 좌표를 복사하여 메모장에 붙여넣습니다.

메서드 2: "여기 있는 항목"에서 복사

• 맵에서 위치를 표시하는 빨간색 핀을 마우스 오른쪽 단추로 클릭하고 메뉴에서 What’s here? ​을(를) 선택합니다.

• 표시된 레이블에서 좌표를 포함한 텍스트를 복사하여 메모장에 붙여넣습니다.

각 Coordinates 상자에 쉼표 없이 숫자를 입력하십시오.

나머지 정보 중 맵에 사용할 수 있는 만큼만 입력할 수도 있습니다.

맵 위치와 연결할 다른 모든 정보를 비교합니다.

완료되면 Save ​을(를) 클릭합니다.

새 위치는 맵과 Edit Map ​페이지의 맵 위치 그리드에 나타납니다.

관리자 사이드바에서 Stores > Settings>Configuration(으)로 이동합니다.

General ​아래의 왼쪽 패널에서​ Content Management ​을(를) 선택합니다.

Advanced Content Tools ​을 확장합니다.

Google Maps Style 텍스트 상자에서 맵 스타일 만들기를 클릭합니다.

이 작업은 별도의 탭에서 Google Maps 플랫폼 스타일 지정 마법사를 엽니다. 이 탭에서 Google Maps 플랫폼 프로젝트의 스타일을 정의할 수 있습니다.

Create a Style ​을(를) 클릭하고 제공된 지침을 따릅니다.

완료되면 Finish ​을(를) 클릭합니다.

완료된 스타일을 Commerce 구성에 추가할 수 있도록 JSON 코드 또는 URL로 내보냅니다.

• JSON: 생성된 JSON 코드가 있는 상자 아래에서 Copy JSON ​을(를) 클릭합니다.

• URL: 생성된 URL이 있는 상자 아래에서 Copy URL ​을(를) 클릭합니다.

관리자 브라우저 탭으로 돌아가서 생성된 코드 또는 URL을 Google 맵 스타일 상자에 붙여 넣습니다.

URL을 사용하는 경우 YOUR_API_KEY 자리 표시자를 Google Maps API 키로 바꾸십시오. 이 URL은 스타일이 지정된 Google 맵에 연결됩니다.

오른쪽 상단에서 Save Config ​을(를) 클릭합니다.

맵 컨테이너 위로 마우스를 가져가 도구 상자를 표시하고 설정( ) 아이콘을 선택합니다.

필요에 따라 기본 설정을 변경합니다.

필요에 따라 Advanced ​설정을 수정합니다.

• 컨테이너에 추가된 맵 콘텐츠의 가로 위치를 제어하려면 Alignment ​을(를) 선택합니다.

  옵션

  설명

  Default

  현재 테마의 스타일시트에 지정된 정렬 기본 설정을 적용합니다.

  Left

  지정된 패딩을 허용하여 맵 컨테이너의 왼쪽 테두리를 따라 콘텐츠를 정렬합니다.

  Center

  지정된 패딩을 허용하여 맵 컨테이너의 가운데에 내용을 맞춥니다.

  Right

  지정된 패딩을 허용하여 맵 컨테이너의 오른쪽 테두리를 따라 콘텐츠를 정렬합니다.

• 맵 컨테이너의 네 면 모두에 적용된 Border 스타일을 설정합니다.

  옵션

  설명

  Default

  연관된 스타일 시트에서 지정한 기본 테두리 스타일을 적용합니다.

  None

  컨테이너 테두리를 시각적으로 표시하지 않습니다.

  Dotted

  컨테이너 테두리가 점선으로 표시됩니다.

  Dashed

  컨테이너 테두리는 파선으로 표시됩니다.

  Solid

  컨테이너 테두리가 실선으로 표시됩니다.

  Double

  컨테이너 테두리는 이중 선으로 표시됩니다.

  Groove

  컨테이너 테두리는 홈이 있는 선으로 표시됩니다.

  Ridge

  컨테이너 테두리는 절선으로 표시됩니다.

  Inset

  컨테이너 테두리는 인세트 선으로 표시됩니다.

  Outset

  컨테이너 테두리는 외곽선으로 표시됩니다.

• None 이외의 테두리 스타일을 설정하는 경우 테두리 표시 옵션을 완료하십시오.

  

  옵션

  설명

  Border Color

  색상 견본을 선택하거나 색상 선택기를 클릭하거나 유효한 색상 이름 또는 이에 해당하는 16진수 값을 입력하여 색상을 지정합니다.

  Border Width

  테두리 라인 너비의 픽셀 수를 입력합니다.

  Border Radius

  테두리의 각 모퉁이를 둥글게 만드는 데 사용되는 반경의 크기를 정의하려면 픽셀 수를 입력합니다.

• (선택 사항) 맵 컨테이너에 적용할 현재 스타일 시트의 CSS classes 이름을 지정합니다.

  여러 클래스 이름은 공백으로 구분합니다.

• Margins and Padding ​에 대한 값을 픽셀 단위로 입력하여 맵 컨테이너의 외부 여백과 내부 패딩을 지정합니다.

  맵 컨테이너 다이어그램에 해당하는 각 값을 입력합니다.

  컨테이너 영역

  설명

  Margins

  컨테이너의 모든 면 바깥쪽 가장자리에 적용되는 빈 공간의 양입니다.

  Padding

  컨테이너의 모든 측면 안쪽 가장자리에 적용되는 빈 공간의 양입니다.
  NOTE

  맵 콘텐츠 유형에는 패딩을 사용할 수 없습니다.

완료되면 Save ​을(를) 클릭하여 설정을 적용하고 Page Builder 작업 영역으로 돌아갑니다.