211021 TIL Google Maps 활용하기 (학습 89일차)

모바일 앱코딩을 하던 중 구글 지도 API를 활용하는 법에 대해 배웠다.

• 구글 맵 API 이용하기

  1. Google Maps Platform에 접속 후 시작하기 - 계정 생성
  2. 프로젝트 생성하고 API키 발급 받기.(사용자 인증 정보에서 확인 가능)
  3. HTML과 CSS 참고하여 작성하기
  4. JavaScript부분 삽입하기
  5. Script 부분 YOUR_API_KEY부분에 해당 API키 붙여 넣기.

     <script async
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBb3-_Bu-3B1GN6H0M4VOB9zZZVQaUxuTg&callback=initMap">
       </script>

  6. 지도에서 원하는 주소를 검색하여 '이 곳이 궁금한가요?' 클릭 후 위도, 경도 복사하여 lat, lng에 붙여 넣기하면 끝!
  7. zoom 숫자를 조절하여 원하는 범위로 설정.

• Marker를 넣어보자.

  1. 위도, 경도를 변수에 별도로 저장

  2. initMap() 안에 marker함수 작성

     let map;
     
     function initMap() {
       let addr = { lat: 37.385148, lng: 127.123177 };
     
       map = new google.maps.Map(document.getElementById("map"), {
         center: addr,
         zoom: 15,
       });
     
       const marker = new google.maps.Marker({
         position: addr,
         map: map,
         title: "서현역"
       });
     
       const infoWindow = new google.maps.InfoWindow({
         content: "서현역"
       });
       infoWindow.open(map,marker);
     }