-
[API]구글맵 API 사용하기Front-End/Javascript 2017. 1. 24. 16:25
웹사이트를 만들다보면 Contact 페이지에 지도를 넣게 되는데요.
구글맵 API를 이용해서 하는 방법을 소개해 드리겠습니다.
어려운 건 없으니 따라해 보시면 될꺼예요.
https://developers.google.com/maps/?hl=ko
구글 API는 너무 자세히 나와 있어서 포스팅이 무색하긴 하네요.
Android, iOS, 웹 브라우저 및 HTTP 웹 서비스를 통해 이용할 수 있어요.
그중에 저는 웹브라우저에 사용하는 방법을 알려드리겠습니다.
01. HTML내에 자리 만들어주기
html <body>안에 자리를 만들어 주고 id값을 지정해 줍니다.
<html>
<head>
<style type="text/css">
#map {
wight: 100%;
height: 30%;
}
</style>
</head>
<body>
<div id = "googleMap" ></div>
</body>
</html>
02. 스크립트 추가하기
구글맵을 불러올 수 있는 자바스크립트를 추가해 줍니다.
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 20, // 확대비율 설정
center: new google.map.LatLng( 원하는 주소의 좌표입력 ), // 지도에서 설정한 주소를 중앙에 위치
scrollwheel: false, // 마우스 휠로 확대/축소 사용 여부
mapTypeControl: false // 캡타입 컨트롤 사용 여부
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
zoom이
0이면 완전히 축소된 지도이고, 확대/축소 수준이 높아질수록 더 높은 해상도로 화면이 확대됩니다.그 외 모든 옵션은 아래 구글API 페이지를 참고하여 사용하시면 될 것 같아요.
마지막으로 <script> src="" 안에 있는 YOUR_API_KEY 부분에 API키 값만 넣으면 간단히 웹브라우저에 나타낼 수 있습니다.
API키를 가져오는 방법을 아래에서 알려 드릴게요.
03. API키 가져오기
아래 링크를 타고 들어가시면 우측 상단에 키 가져오기 라는 버튼이 보이실 겁니다.
https://developers.google.com/maps/documentation/javascript/?hl=ko
API 활성화 창이 뜨는데요. 계속 눌러주시면 되요.
제한사항을 설정 할 수 있기 때문에 사용자인증정보도 확인하시고 생성 누르시면
영문과숫자가 합쳐진 긴 키값을 확인 하실 수 있을 꺼예요.
그걸 스크립트 src 부분에 복사해서 넣으시면 인증되서 바로 보여요.
부족하신 부분은 아래 링크에서 추가적으로 확인하셔서 사용하시면 될 것 같아요.
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ko