AngularJS - 지도 애플리케이션
안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 AngularJS와 Google Maps의 세계로 흥미로운 여정을 떠납니다. 이 튜토리얼의 끝까지 따라오시면, 여러분이 자신만의 상호작용형 지도 애플리케이션을 만들 수 있게 될 것입니다. 멋지지 않나요? 시작해 보겠습니다!
AngularJS와 Google Maps 소개
코딩을 시작하기 전에, AngularJS와 Google Maps가 무엇인지 이해해 보겠습니다.
AngularJS는 动态 웹 애플리케이션을 구축하는 데 도움을 주는 강력한 JavaScript 프레임워크입니다. 마치 HTML의 슈퍼히어로 비서처럼, 상호작용적이고 반응형 웹 페이지를 만들어주는 초능력을 부여합니다.
반면에 Google Maps는 전 세계의 지리적 지역과 장소에 대한 상세 정보를 제공하는 웹 지도 서비스입니다. 마치 손바닥에 전 세계를 가지고 있는 것과 같습니다!
이 두 기술을 결합하면 놀라운 지도 기반 애플리케이션을 만들 수 있습니다. 흥미롭지 않나요?
프로젝트 설정
단계 1: AngularJS와 Google Maps API 포함
먼저, HTML 파일에 필요한 라이브러리를 포함시켜야 합니다. 다음과 같이 합니다:
<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>내 AngularJS 지도 앱</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<!-- 우리 앱이 여기에 들어갈 자리 -->
<script src="app.js"></script>
</body>
</html>이 코드에서 우리는 AngularJS와 Google Maps API를 포함시킵니다. 'YOUR_API_KEY'를 여러분의 실제 Google Maps API 키로 대체하세요. 아직 API 키가 없으시다면 걱정 마세요; 나중에 어떻게 얻을 수 있는지 설명할 테니까요.
단계 2: AngularJS 앱 생성
이제 AngularJS 앱을 만들어 보겠습니다. app.js라는 새로운 파일을 만들고, 다음 코드를 추가하세요:
var app = angular.module('mapApp', []);
app.controller('MapController', function($scope) {
// 우리의 지도 로직을 여기에 추가할 거예요
});이 코드는 'mapApp'이라는 이름의 AngularJS 모듈과 'MapController'라는 컨트롤러를 생성합니다. 모듈은 우리의 앱을 담는 컨테이너로, 컨트롤러는 지도를 관리하는 뇌로 생각하시면 됩니다.
지도 구축
단계 3: 지도 초기화
컨트롤러에 코드를 추가하여 지도를 초기화하겠습니다:
app.controller('MapController', function($scope) {
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});이 함수는 뉴욕 시를 중심으로 새로운 Google Maps를 생성합니다 (координаты를 원하는 위치로 변경할 수 있습니다). zoom 수준은 지도가 얼마나 확대되어 있는지를 결정합니다.
단계 4: 지도를 HTML에 추가
이제 HTML에 지도가 표시될 div를 추가해 보겠습니다:
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>ng-controller 디렉티브는 AngularJS가 이 페이지 부분에서 우리의 MapController를 사용하도록 지시합니다. ng-init 디렉티브는 페이지가 로드될 때 initMap 함수를 호출합니다.
마커 추가
단계 5: 마커 추가 함수 생성
컨트롤러를 강화하여 지도에 마커를 추가하는 기능을 추가해 보겠습니다:
app.controller('MapController', function($scope) {
var map;
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
$scope.addMarker = function(lat, lng, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
}
});이 새로운 addMarker 함수는 지정된 위도와 경도에서 마커를 생성합니다.
단계 6: 마커 함수 사용
이제 우리의 새로운 함수를 사용하여 마커를 추가해 보겠습니다:
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, 'Empire State Building')">Empire State Building 추가</button>
<button ng-click="addMarker(40.7484, -73.9857, 'Statue of Liberty')">Statue of Liberty 추가</button>
<script src="app.js"></script>
</body>이 버튼들은 클릭할 때 Empire State Building과 Statue of Liberty 마커를 추가합니다.
사용자 입력 처리
단계 7: 입력 폼 생성
사용자가 자신의 마커를 추가할 수 있도록 입력 폼을 생성해 보겠습니다:
<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="제목">
<input type="number" ng-model="newMarker.lat" placeholder="위도">
<input type="number" ng-model="newMarker.lng" placeholder="경도">
<button type="submit">마커 추가</button>
</form>단계 8: 폼 제출 처리
다음 함수를 컨트롤러에 추가하세요:
$scope.newMarker = {};
$scope.addCustomMarker = function() {
if($scope.newMarker.title && $scope.newMarker.lat && $scope.newMarker.lng) {
$scope.addMarker($scope.newMarker.lat, $scope.newMarker.lng, $scope.newMarker.title);
$scope.newMarker = {};
}
}이 함수는 모든 필드가 채워져 있는지 확인하고, 마커를 추가한 후 폼을 지웁니다.
결론
축하합니다! 여러분은 첫 AngularJS 지도 애플리케이션을 성공적으로 만들었습니다. 이제 여러분은 지도를 표시하고, 사전 정의된 마커를 추가하며, 사용자가 자신의 마커를 추가할 수 있게 합니다. 이것이 시작일 뿐입니다. AngularJS와 Google Maps와 함께 할 수 있는 것은 무궁무진합니다.
기억하세요, 우수한 프로그래머가 되는 열쇠는 연습입니다. 지도 앱에 더 많은 기능을 추가해 보세요. 마커를 클릭할 때 정보를 표시하거나, 다른 유형의 마커를 추가해 보세요. 가능성은 무한합니다!
미래의 기술 마법사 여러분, 즐겁게 코딩하세요!
| 방법 | 설명 |
|---|---|
initMap() |
Google Maps를 초기화합니다 |
addMarker(lat, lng, title) |
지정된 위도와 경도에 마커를 추가합니다 |
addCustomMarker() |
사용자 입력을 처리하여 커스텀 마커를 추가합니다 |
Credits: Image by storyset