구글 클라우드에서 API 키 만들기
1. 아래에서 Get Started를 누르고 구글 Cloud Console 가입
(신용카드 결제 정보 필요 - 결제할 필요는 없음. 무료임)
Google Maps Platform
2. 첫 프로젝트 만들기
My First Project 클릭 후 새 프로젝트 생성 또는 기존 프로젝트 선택
3. 왼쪽 메뉴에서 "사용자 인증 정보" 클릭 - API 키 생성
Maps JavaScript API 키 사용해 웹페이지에 지도 삽입하기
1. html에 id=map인 div 태그 삽입
<div id="map"></div>
2. 아래 코드의 YOUR_API_KEY 자리에 위에서 만든 API 키를 넣고 Maps JavaScript API 로드
<script async defer
src="<https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap>">
</script>
참고: async
script 태그의 async 속성은 스크립트가 나머지 페이지와는 비동기적으로 실행됨을 나타내며, 브라우저가 페이지를 파싱하는 동안에도 스크립트가 사용가능해지면 곧바로 실행됨을 명시합니다.
http://www.tcpschool.com/html-tag-attrs/script-async
참고: defer
script 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다.
http://www.tcpschool.com/html-tag-attrs/script-defer
3. 실행 JavaScript 코드
function initMap(){
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
map 변수를 new 생성자를 사용해 여러 개 만들면 지도를 여러 개 넣을 수 있다.
Map Options
There are two required options for every map: center and zoom.
기본 옵션: center, zoom
- center에는 가운데 올 위도, 경도 값을 넣음.
- zoom은 숫자가 높을수록 확대됨.
1은 World, 10은 City, 15는 Streets, 20은 Buildings 수준
위도, 경도 표시
원래 구글맵에서 위도, 경도를 볼 수 있는데 왜인지 뜨지 않길래... 아래 사이트에서 위도, 경도를 찾아서 넣었다.
http://map.esran.com/
근데 독도 찾아서 넣으니까 구글맵은 리앙쿠르 암초라고 뜸... 짜증남
기타 옵션
scrollwheel: boolean -> 스크롤 막음
styles: Array -> map에 스타일 주기(Array)
