[javascript] Parcel에서 구글 맵을 추가하는 방법은?

22 Nov 2023

javascript

먼저, 프로젝트 디렉토리에서 다음 명령어를 실행하여 Parcel을 설치합니다:

npm install -g parcel-bundler

다음으로, 구글 맵을 사용하려는 HTML 파일에 다음과 같이 코드를 작성해야 합니다:

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        function initMap() {
            // 맵을 생성하고 중앙 좌표를 설정합니다
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
            
            // 맵에 마커를 추가합니다
            var marker = new google.maps.Marker({
                position: {lat: -34.397, lng: 150.644},
                map: map,
                title: 'Hello World!'
            });
        }
        
        // initMap 함수를 호출하여 맵을 초기화합니다
        initMap();
    </script>
</body>
</html>

위의 코드에서 YOUR_API_KEY를 구글 맵 API 키로 변경해야 합니다. 구글 맵 API 키를 얻으려면 Google Cloud 콘솔에서 프로젝트를 생성하고, “Maps JavaScript API”를 활성화하세요.

마지막으로, 다음 명령어를 사용하여 Parcel을 실행합니다:

parcel index.html

Parcel은 자동으로 종속성을 해석하고 번들링한 후, 애플리케이션을 localhost:1234 또는 선택한 다른 포트에서 실행합니다. 이제 구글 맵이 포함된 웹 애플리케이션을 확인할 수 있습니다.

구글 맵을 Parcel 프로젝트에 추가하는 방법에 대한 설명입니다. Parcel을 사용하여 보다 효율적이고 간편한 웹 애플리케이션 개발을 경험해보세요.