[TIL]pug에 구글 지도 삽입하기

러닝워터·2019년 10월 22일
0

TIL

목록 보기
5/7

API key 발급받기

예전과 다르게 구글 지도를 사용하려고 하면 API키를 발급받아야 한다. 발급받은 키는 요청 시에 추가해서 요청하면 됩니다.

또 api키를 발급받기 위해선 카드 정보를 입력해야 한다는 것도 잊지 말자.

키 발급받으러 가기

이미 있다면 콘솔창을 들어가면 되고 없다면 "시작하기" 버튼을 통해서 시작하면 됩니다.

pug에 스크립트 삽입하기

pug 내부에 script를 적으려면 .을 붙여주면 됩니다.

script.
	var a = 10;

위와 같은 형태라고 할 수 있다. 구글 맵을 넣는데 필요한 소스코드를 넣어주면 됩니다.

script.
    function initMap(){
        var center = {lat:positionLat, lng:positionLng};
        var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15,
                    center: center
                });
                new google.maps.Marker({
                    position: {lat: center.lat, lng:center.lng},
                    map: map,
                    title: positionTitle
                })
            }

위와 같이 initMap 이라는 함수를 정의하면 된다. 이 이름은 구글의 예제를 보면 비슷하게 되어 있는 것을 확인할 수 있습니다.

예제보기

해당 스크립트 코드를 입력했다면 이제 스크립트 태그를 통해 요청을 하면 됩니다.

script(async, defer, src=`https://maps.googleapis.com/maps/api/js?key=${yourAPI}&callback=initMap`)

해당 코드는 지도를 요청합니다.

async와 defer 속성

위의 스크립트 코드에는 async와 defer 속성이 추가되어 있는 것을 볼 수 있습니다.

스크립트 태그를 만나면 일단 스크립트 태그 안에 있는 것을 해석합니다. 동기적이라고 표현할 수 있습니다. 그래서 태그 위에 스크립트 태그를 많이 삽입합니다.

하지만 async 속성이 추가되면 해당 스크립트 파일이 비동기적으로 실행될 수 있도록 해줍니다.

정확히 표현하자면 외부에 위치한 스크립트 파일을 비동기적으로 다운로드 할 수 있고, 실행되는 순간에만 html의 구문분석이 일시 중지됩니다.

여기에 defer 속성을 추가하면 어떻게 될까요?

defer속성을 추가하면 html구문분석이 다된 후에 스크립트 파일이 실행됩니다.

구글 map을 호출하는 스크립트 파일에 해당 두 속성이 들어가 있는 이유는 비동기적으로 다운로드하고, html 구문 분석이 끝나고 난 뒤 지도를 보여주기 때문입니다. 즉 속도가 더 빠른 것처럼 보여서 사용자 경험을 증가시킵니다.

profile
프로그래밍을 여행하는 히치하이커

0개의 댓글