구글 지도(Google Maps) API 사용법
오늘은 이클립스에서 구글 지도를 사용하는 방법에 대해 알아보도록 하겠습니다.
구글 지도를 사용하기 위해서는 구글 API가 필요합니다.
구글 검색창에 'google maps api'를 검색합니다.
'Google Maps API - Google Developers'를 클릭하여 접속합니다.
아니면 'https://developers.google.com/maps/?hl=ko'사이트로 접속합니다.
원하는 서비스를 클릭합니다.
저는 '웹'을 선택하도록 하겠습니다.
'Google Maps JavaScript API'를 선택합니다.
원하는 튜토리얼을 클릭합니다.
저는 '마커가 포함된 지도 생성'을 선택하도록 하겠습니다.
스크롤을 내려보시면 '체험해 보기' 아래에
코드가 나열된 모습을 보게 됩니다.
코드를 복사하여 이클립스에 붙여넣습니다.
코드 아래쪽에 'YOUR_API_KEY'라고 분홍색 점선 박스로 되어있는 부분이 보일 겁니다.
자신만의 키를 받아서 'YOUR_API_KEY'에 입력해야 구글 지도가 완성됩니다.
다시 스크롤을 위로 올려 '키 가져오기'를 클릭합니다.
네임을 지정해준 뒤(네임을 따로 지정하지 않으면 자동으로 'My Project'),
'Yes'를 체크합니다.
자신의 키를 받게 됩니다.
키를 복사합니다.
복사한 키를 이클립스 코드에 있는 'YOUR_API_KEY'에 삽입합니다.
다음은 실행 결과입니다.
혹시 위의 과정 중에 문제가 있는 사람들을 위해 코드를 공유합니다 ~
아래의 코드에서 'YOUR_API_KEY'에 자신의 키를 받아 입력해야 한다는 사실을 잊지 마시기 바랍니다 ~
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>