소개
이 튜토리얼에서는 마커가 있는 간단한 Google 지도를 웹페이지에 추가하는 방법을 보여줍니다. 이 튜토리얼은 HTML 및 CSS에 초중급 지식이 있고 JavaScript에 대해 약간 지식이 있는 분들에게 적합합니다. 지도 생성을 위한 고급 가이드에 대해서는 개발자 가이드를 참조하세요.
다음은 이 튜토리얼을 사용하여 만들 지도입니다.
아래 섹션에서는 이 튜토리얼에서 지도를 만드는 데 필요한 전체 코드를 표시합니다.
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
});
}
<h3>My Google Maps Demo</h3> <div id="map"></div>
#map {
height: 400px;
width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
체험해 보기
코드 블록 오른쪽을 마우스로 가리켜서 코드를 복사하거나 JSFiddle에서 엽니다.
<!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>
시작하기
웹페이지에서 마커가 있는 Google 지도를 만드는 3단계 방법:
웹 브라우저가 필요합니다. 자신의 플랫폼에 따라 Google Chrome(권장), Firefox, Safari 또는 Internet Explorer와 같은 널리 알려진 브라우저를 선택합니다.
1단계: HTML 페이지 만들기
다음은 기본 HTML 웹페이지를 만들기 위한 코드입니다.
<h3>My Google Maps Demo</h3> <div id="map"></div>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
</body>
</html>
참고로, 이 코드는 표제 수준 3(h3), div 요소 및 style 요소가 있는
매우 간단한 페이지이며 이 모두에 대해서는 아래 표에
설명됩니다. 좋아하는 콘텐츠를 웹페이지에 추가할 수 있습니다.
체험해 보기
위 샘플 코드의 오른쪽 상단 모서리에 두 개의 버튼이 있습니다. 가장 왼쪽 버튼을 클릭하여 JSFiddle에서 샘플을 엽니다.
코드 이해하기
이 표에서는 위 코드의 각 섹션에 대해 설명합니다.
| 코드 및 설명 | |
|---|---|
|
헤드 및 본문으로 구성된 HTML 페이지를 만듭니다. |
|
지도 위에 표제 수준 3을 추가합니다. |
|
Google 지도의 페이지 영역을 정의합니다. 튜토리얼의 이 단계에서는 아직 지도를 추가하지 않았기 때문에 div가 회색 블록으로 나타납니다. 회색인 이유는 CSS가 적용되었기
때문입니다. 아래를 참조하세요. |
|
head의 style 요소는 지도의 div 크기를
설정합니다.
지도가 보이게 하려면 div 너비와 높이를 0px보다 크게
설정합니다.
이 경우, 웹페이지의 너비에 맞게 표시되도록 div가 높이 500 픽셀, 너비
100%로 설정됩니다.
웹페이지에서 지도 영역을 보려면 background-color: grey를 div에
적용합니다. |
2단계: 지도에 마커 추가
이 섹션에서는 Google Maps JavaScript API를 웹페이지에 로드하는 방법과 API를 사용하여 지도 위에 마커를 추가하는 JavaScript를 작성하는 방법을 보여줍니다.
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
});
}
<h3>My Google Maps Demo</h3> <div id="map"></div>
#map {
height: 400px;
width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!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>
체험해 보기
위 샘플 코드의 오른쪽 상단 모서리에 두 개의 버튼이 있습니다. 가장 왼쪽 버튼을 클릭하여 JSFiddle에서 샘플을 엽니다.
코드 이해하기
참고로, 위 샘플에는 div를
회색으로 만드는 CSS가 없습니다. 그 이유는 이제 지도가 div에 포함되기 때문입니다.
이 표에서는 위 코드의 각 섹션에 대해 설명합니다.
| 코드 및 설명 | |
|---|---|
|
script는 지정된 URL에서 API를 로드합니다.
callback 매개변수는 API가 완전히 로드된 후에 initMap 함수를
실행합니다.
async 특성은 API가 로드되는 중에 브라우저가 나머지 페이지의 렌더링을
계속하도록 합니다.
key 매개변수에는 API 키가 포함됩니다. JSFiddle에서
이 튜토리얼로 시험할 때는 자체 API 키가 필요
없습니다. 나중에 자체 API 키를 가져오는 방법에 대해서는 3단계: API 키 가져오기를
참조하세요. |
|
initMap 함수는 웹페이지가 로드될 때
지도를 초기화하고 추가합니다. initMap 함수가 포함된 JavaScript를
포함시키려면 script 태그를 사용하세요. |
|
지도 div를
웹페이지에서 찾으려면 이 함수를 추가합니다. |
|
div 요소에서 지도를 구성하려면
이 새 Google 지도 객체를 추가합니다. |
|
중앙과 확대/축소 수준을 비롯한 속성을 지도에 추가합니다. 기타 속성 옵션은 문서를 참조하세요. center 속성은 API에 지도의 중심을 어디로 잡을지 알려줍니다.
지도 좌표는 위도,
경도의 순서대로 설정됩니다.
zoom 속성은 지도의 확대/축소 수준을 지정합니다.
확대/축소: 0은 가장 낮은 확대/축소 수준이며 지구 전체를 표시합니다.
확대/축소 값을 더 높게 설정하면 지구가 더 높은 해상도로 확대됩니다. |
|
지도에 마커를 넣으려면 이 코드를 추가합니다. position
속성은 마커의 위치를 설정합니다.
|
3단계: API 키 가져오기
이 섹션에서는 API 키를 사용하여 앱을 Google Maps JavaScript API에 인증하는 방법에 대해 설명합니다.
다음 단계를 수행하여 API 키를 가져옵니다.
- Google API Console로 이동합니다.
- 프로젝트를 만들거나 선택합니다.
- Continue를 클릭하여 API와 모든 관련 서비스를 활성화합니다.
-
Credentials 페이지에서 API key를 가져옵니다(그리고 API 키 제한을 설정합니다).
참고: 기존의 무제한 API 키가 있거나 브라우저 제한이 있는 키가 있다면, 이 키를 사용할 수도 있습니다.
-
할당량 도난을 방지하려면, 다음 모범 사례에 따라 API 키의 보안을 설정합니다.
-
(선택 사항) 결제를 활성화합니다. 자세한 내용은 사용 제한을 참조하세요.
- 이 튜토리얼의 전체 코드를 이 페이지에서 텍스트 편집기로 복사합니다. 텍스트 편집기가 아직 없는 경우, 다음과 같은 편집기를 권장합니다. 다음 편집기를 사용할 수 있습니다: Notepad++(Windows용), TextEdit(macOS용), gedit, KWrite(Linux 시스템용).
-
URL에서
key매개변수의 값을 API 키(방금 획득한 API 키)로 대체합니다.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer> </script> -
이 파일을 .html로 끝나는 이름으로 저장합니다(예: google-maps.html).
- HTML 파일을 데스크톱에서 브라우저로 드래그하여 웹 브라우저에서 로드합니다. 또는 파일을 두 번 클릭하면 대부분의 운영 체제에서 작동합니다.
팁 및 문제 해결
- JSFiddle 인터페이스를 사용하여 HTML, CSS 및 JavaScript 코드를 별도 창에 표시하세요. 코드를 실행하고 출력을 Results 창에 표시할 수 있습니다.
- 스타일, 속성 등의 옵션을 조정하여 지도를 사용자 지정할 수 있습니다. 지도 사용자 지정에 대한 자세한 내용은 Maps JavaScript API를 더 읽어보세요.
-
웹 브라우저에서 Developer Tools Console을 사용하여 코드를 테스트/실행하고, 오류 보고서를 읽고, 코드의 문제를 해결하세요.
Chrome에서 콘솔을 여는 키보드 단축키: Command+Option+J (Mac) 또는 Control+Shift+J (Windows).
도움이 필요하시나요? 지원 페이지