깃헙 사이트 만들기를 하면서 구글 맵을 붙히기로 했다.

강의에서도 구글을 사용했고 카카오 맵은 국내가 더 적합할거같아서 구글맵을 사용하기로 마음먹었는데..!

 

아니 오류 무슨일입니까?_? 예전에 학원 다닐때는 (지금으로부터 4년전) 구글 맵 진짜 직관성있게 깔끔하게 붙혀졌던 기억이 있는데

왜케 구질구질하게 붙는거죠,,,

 

1. 구글에 구글맵 api 검색 후 Map Platform - Google for Developers 클릭

2. 시작하기 클릭

3. 이후는 가입 양식에 맞춰서 진행하면 됩니다.

신용카드 입력 부분이 나오는데 스크린샷에 나온거처럼 자동 가입 방지를 위해서라고 하는데 솔직히 잘 모르겠네요.

무료 체험판 사용기간이 2달인데 그후에 자동청구 된다는 블로그들은 보지 못했으니,,일단 2달 두고 보려고합니다.

 

4. 어찌저찌 키 발급이 완료 되면 API 제한 사항에서 키 제한을 선택하고 필요한 API 를 찾아서 선택 후 저장합니다.

예전에 스크립트로 붙혀쓰던 API는 아래와 같습니다.

  • Maps JavaScript API

혹여 선택목록에서 원하는 API 가 보이지 않는다면 리소스,문서,제품 등 검색(/)  검색창에 조회 후 추가해주면 됩니다.

 

5. html에 붙히기

위도,경도는 깃헙의 주소이다.

script 의 src 를 통해 url 을 호출하고 url 끝에 적힌 콜백으로 소스상의 initMap 함수가 실행되니까 따로 호출해줄필요 없다.( 스크립트 상 initMap() 호출 불필요)

나는 서버를 통하지 않고 클라이언트 환경에서만 실행 될 수 있도록 작성중이라 API KEY 값 숨기기가 너무 어려워서 포기했다..ㅠㅠ..

config.js 모듈 만들어서 불러오고 별 난리 다쳤는데 결국 개발자도구에 api 키 값이 보이고 개발자도구 소스 트리에서도 config js 보이고,,허허,, 챗 GPT한테도 물어보니까 서버에서 호출하는거 아니면 보안은 무조건 취약하다고 하는데

그래도 고수님들은 할 수 있지 않을까.. (혹시라도 클라이언트에서만 키 값 감추는거 아시는 분은 댓글 주세요 ㅠㅠ 넘 궁금해요)

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Github</title>
  <!-- javascript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>
  <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
  <script>
  let map;
  async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    
    const myLatlng = {
      lat: 37.782293,
      lng: -122.391240
    }

    map = new Map(document.getElementById("map"), {
      center: myLatlng,
      scrollwheel: false,
      zoom: 18,
    });

    new google.maps.Marker({
    position: myLatlng,
    map,
    title: "Github",
  });

  }// end of init map

</script>
</head>

6. 로컬에서 실행 했을 때 결과입니다.

마커랑 깃헙위치랑 미묘하게 다른거 너무 킹받네요..ㅋㅋㅋ..

기어코 구글 맵 붙혀서 좋긴한데 google developer 사이트 탐방만 2시간 한듯ㅋㅋㅋ

'Javascript' 카테고리의 다른 글

Optional Chaning - ?? (물음표 두개) 문법  (0) 2020.12.10
Javascript forEach문에 관해  (0) 2020.04.24
Javascript 원하는 문자열 포함하여 찾기  (0) 2020.03.05
JavaScript란?  (0) 2020.02.05

+ Recent posts

티스토리툴바