[javascript] SweetAlert와 구글 지도 연동 방법

24 Nov 2023

javascript

SweetAlert는 사용자에게 예쁜 경고창을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리는 사용자에게 텍스트나 버튼 등의 인터페이스 요소를 보여주고, 사용자의 선택에 따라 코드를 실행할 수 있습니다. 이번 포스트에서는 SweetAlert를 사용하여 구글 지도와 연동하는 방법에 대해 알아보겠습니다.

구글 지도 API 키 발급하기

SweetAlert와 구글 지도를 연동하려면 먼저 구글 지도 API 키를 발급해야 합니다. 구글 클라우드 플랫폼 콘솔에 접속하여 새 프로젝트를 만들고, 구글 지도 API를 활성화한 후 API 키를 발급받으세요.

SweetAlert 사용하기

먼저 SweetAlert 라이브러리를 웹 페이지에 추가해야 합니다. HTML 파일의 head 태그 안에 다음 코드를 추가하세요.

<head>
  ...
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

구글 지도 API를 사용하기 위해 다음 스크립트를 웹 페이지에 추가하세요.

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

YOUR_API_KEY 부분에는 발급받은 구글 지도 API 키를 넣어야 합니다.

SweetAlert와 구글 지도 연동하기

이제 SweetAlert와 구글 지도를 연동하는 JavaScript 코드를 작성해 보겠습니다.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.5665, lng: 126.9780 },
    zoom: 12,
  });

  swal({
    title: "구글 지도",
    text: "이것은 구글 지도입니다.",
  }).then((result) => {
    if (result.value) {
      // SweetAlert에서 확인 버튼을 클릭한 경우 실행할 코드 작성
      // 예를 들어, 지도를 클릭한 위치에 마커를 추가하는 등의 작업 가능
    }
  });
}

지도의 초기 위치를 설정하고, SweetAlert를 사용하여 메시지를 표시한 후, 사용자가 확인 버튼을 클릭하면 실행할 코드를 작성합니다. 사용자에게 선택을 받아 특정 동작을 수행하도록 코드를 작성하는 것이 가능합니다.

이렇게 구현하면 SweetAlert와 구글 지도를 연동해서 사용자에게 예쁜 경고창을 표시하고, 사용자의 선택에 따라 원하는 동작을 수행할 수 있습니다.

요약

SweetAlert를 사용하여 구글 지도와 연동하는 방법에 대해 알아보았습니다. 구글 지도 API 키를 발급받고, SweetAlert와 구글 지도를 웹 페이지에 추가하고, JavaScript 코드를 작성하여 SweetAlert와 구글 지도를 연동할 수 있습니다.

참고 자료

SweetAlert 공식 문서: https://sweetalert.js.org/
구글 지도 API 공식 문서: https://developers.google.com/maps/documentation