JavaScript를 사용하여 마커가 포함된 Google 지도 추가

소개

이 튜토리얼에서는 HTML, CSS, JavaScript를 사용하여 마커가 포함된 Google 지도를 웹페이지에 추가하는 방법을 보여줍니다. 또한 지도 옵션을 설정하는 방법과 컨트롤 슬롯팅을 사용하여 지도에 라벨을 추가하는 방법을 보여줍니다.

이 튜토리얼을 사용하여 아래와 같은 지도를 만듭니다. 마커가 울루루 카타츄타 국립공원의 울루루(에어스 록이라고도 함)에 배치되어 있습니다.

시작하기

웹페이지에 마커가 포함된 Google 지도를 만들려면 다음 세 단계를 따르세요.

  1. API 키 가져오기
  2. HTML 페이지 만들기
  3. 마커가 포함된 지도 추가

웹브라우저가 필요합니다. 지원되는 브라우저 목록에서 플랫폼에 따라 Chrome(권장), Firefox, Safari, Edge와 같이 잘 알려진 브라우저를 선택하세요.

1단계: API 키 가져오기

이 섹션에서는 자체 API 키를 사용하여 Maps JavaScript API에 앱을 인증하는 방법을 설명합니다.

다음 단계에 따라 API 키를 가져옵니다.

  1. Google Cloud 콘솔로 이동합니다.

  2. 프로젝트를 만들거나 선택합니다.

  3. 계속을 클릭하여 API와 모든 관련 서비스를 사용 설정합니다.

  4. 사용자 인증 정보 페이지에서 API 키를 가져오고 API 키 제한사항을 설정합니다. 기존에 무제한 API 키가 있거나 브라우저 제한이 있는 키가 있으면 그 키를 사용할 수도 있습니다.

  5. 할당량 도난을 방지하고 API 키를 보호하려면 API 키 사용을 참고하세요.

  6. 결제를 사용 설정합니다. 자세한 내용은 사용량 및 결제를 참고하세요.

  7. API 키를 받으면 'YOUR_API_KEY'를 클릭하여 다음 스니펫에 추가합니다. 자체 웹페이지에서 사용할 부트로더 스크립트 태그를 복사하여 붙여넣습니다.

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",