1. Introduction
지금까지 배워왔던 jQuery를 통해 웹사이트 안에서 여러 방면의 인터렉션과 미디어 재생같은 다채로운 기능들을 추가할 수 있다는 것을 알았다. 이번에 배워볼 내용은 이러한 jQuery의 영역을 Google Maps까지 확장시키는 것이다.
구글은 웹페이지 안에서 아주 쉽게 지도를 첨부하게끔 하는 서비스를 기능한다. 이때 구글은 또한 웹디자이너와 개발자들에게 API (Application Programming Interface)를 제공하여 지도에 더욱 새로운 기능들을 추가하게 만든다. 이번에 배울 내용 중 구글 지도를 웹페이지에 집어넣게 만들고 커스텀 마커와 레이블을 표시하여 더욱 자신만의 스타일이 추가된 지도를 꾸며보는 것들이 핵심이 될 것이다.
2. Setting Up
구글 지도 API는 많은 양의 프로그래밍 언어들을 통해 접근을 부여해주는데 이때 JavaScript 접근은 아주 포괄적이교 유용하지만 아직 우리가 배우지 못한 'Vanilla' JavaScript (외부 프레임워크나 라이브러리를 쓰지않는 순수한 JavaScript 코드)의 지식을 필요로 한다. 다행히도 이러한 API를 jQuery를 사용하여 접근 가능하게 만들어주는 Library가 있는데 이러한 Library를 이용하기 위해서는 어느정도의 세팅을 필요로 한다. 이는 다음과 같다.
- jQuery (jQuery는 HTML Document와 같은 파일 안에 있어야 한다)
- Google Maps JavaScript API (Google의 서버에서로부터 API를 가져와야 한다)
- jQuery Map Library (이도 또한 HTML Document와 같은 파일 안에 있어야 한다)
이때 유의해야할 점은 Google Maps API를 사용하기 위해서는 API를 활성화시킬 키가 필요한데 이는 돈을 주고 지불해야 한다. 이는 아래 사이트를 통해 구입 가능하며 보안상 코드블럭 안의 Google Maps JavaScript API 주소와 jQuery Map Library 코드는 가리도록 하겠다.
Download Google Maps JavaScript API
https://mapsplatform.google.com/
Google Maps Platform - Location and Mapping Solutions
Create real world and real time experiences for your customers with dynamic maps, routes & places APIs from Google Maps Platform’s location solutions.
mapsplatform.google.com
Download jQuery Map Library
https://www.jqueryscript.net/tags.php?/map/
An error occurred
www.jqueryscript.net
우선적으로 HTML 도큐멘트 파일안에 있는 <head> 부분안에 기존에 jQuery를 사용하기 위해 <script> 태그를 따로 집어넣었던 것처럼 이번에는 세 개의 각기 다른 <script> 주소를 집어넣어주어야 한다. 이는 다음과 같고 앞서 언급했듯이 Google Maps JavaScript API와 jQuery Map Library는 코드블럭상에서 보이지 않게 쓰지 않았다. 또한 이번에는 CDN을 쓰지 않고 jQuery Library를 확실하게 같은 폴더 안에 다운로드 받았다는 조건하에 코드를 다음과 같이 써넣어주었다.
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="??"></script> <!-- 구글로부터 지불하여 받아낸 Google Maps JS API를 써넣어야 한다 -->
<script src="jquery-3.6.1.min.js"></script> <!-- CDN으로 jQuery를 불러오는 것이 아닌 직접적으로 다운받은 jQuery Library를 코드로 불러와라 -->
<script src="??"></script> <!-- jQuery로부터 다운로드하여 받아낸 jQuery Map Library를 써넣어야 한다 -->
<script>
$(document).ready(function() { // jQuery를 사용하기 위해 필수
}); // jQuery를 사용하기 위해 필수
</script>
</head>
이때 기존에 jQuery를 사용했던 <script>말고도 두 개의 각기 다른 <script> 태그들이 생긴것을 볼 수 있다. 이는 보안상 코드블럭상에 나타내지 않았지만 각기 Google Maps JS API와 jQuery Map Library를 나타낸다. 이때 <script>태그의 순서는 윗 코드와 동일하게 작성되어야 하며 그렇지 않다면 제대로 작동되지 않는 것을 느낄것이다. 순서는 아래와 같다.
Google Maps JavaScript API -> jQuery Library -> jQuery Map Library
3. Adding a Map
이때 위에 적힌 <script>를 이용하여 Map을 본격적으로 웹페이지 안에 삽입하는 방법은 총 세 개의 단계들을 필수로 하는데 우선 첫번째로 HTML 코드를 작성해주어야 한다. 그다음 Map의 스타일을 꾸며주기 위한 CSS 코드 또한 작성해주어야 한다음 마커와 레이블들을 추가해주기 위한 jQuery 또한 작성해주어야 한다.
Map HTML
이제부턴 HTML이 아마 가장 쉽게 느껴질 것이다. HTML이 해야하는 역할은 오직 Map이 첨부될 웹 페이지 안에서의 공간을 창출해주는 것이므로 이때 <div> 태그를 사용하여 구간을 설정해주고 id attribute로 <div> 태그 안에 있는 요소에 이름을 부여해주면 된다.
<div id="myMap"></div>
HTML은 끝이다! 물론 다음 것들로 인해 머리가 지끈지끈 해질것이지만 말이다.
Map CSS
CSS는 간단하게 삽입될 Map의 가로길이와 세로길이값을 지정해주는 역할을 주되게 해준다. 또한 만약 디자이너가 웹페이지안에서의 Map의 위치를 지정하고 태두리까지 만들어 주고 싶다면 다음과 같이 코드를 작성해주면 된다.
#myMap {
width: 800px;
height: 450px;
border: 3px solid #000000;
margin: auto;
}
아직까지는 우리가 배웠던 내용으로 다 커버 가능한 수준이다. 이때 위에서 작성된 CSS Property의 값들은 유저가 원하는데로 다르게 만들어 줄 수 있고 위의 있는 코드는 예시일 뿐이다.
이때 페이지를 실행해보면 웹 브라우저 센터에 검은색 테두리가 있는 직사각형을 발견할 것이다. 그렇게 되면 성공한 것이고 그 공간안에 jQuery를 사용하여 본격적으로 Map을 집어넣어야 해주어야 한다.
Map jQuery
이제부터 jQuery를 영접할 시간이다. 많이 복잡해질 것 같다. 우선 HTML 도큐멘트 안 $(document).ready(function() { }); 안에 jQuery 코드를 집어넣게 된다는 것은 다 알 것이다. 이 안에 다음과 같은 코드를 집어넣어야 Google Map을 첨부할 수 있다.
<script>
$(document).ready(function() { // jQuery로써
$('#myMap').gmap(); // myMap으로 지정된 ID가 있는 요소 안에 Google Map을 추가하여라
});
</script>
- 이 코드로 알 수 있는 것은 이 코드는 <div>안에 있는 id attribute가 myMap으로 지정된 요소를 타게팅하고 .gmap() function을 추구하면서 그 요소의 부분이 Maps Library가 로딩될 부분이라고 브라우저에게 말해주는 역할을 한다. 이때 브라우저를 실행시켜 보면 <div>요소 안에 Map이 자동적으로 생기는 것을 볼 수 있을 것이다. (물론 Google Maps JavaScript API와 jQuery Map Library를 앞서 <head>안에 <script>로써 작성해주는 것은 필수 이다.)
만약 Map이 브라우저 안에 생기지 않다면 <head>안 <script> 요소들을 전부 검토해보거나 지금까지 다운로드 한 jQuery나 jQuery Maps Library가 HTML 도큐멘트와 같은 폴더 안에 위치하고 있는지 확인해야 한다.
이 때 지도에 추가해줄 요소들로 다음과 같은 옵션들을 코드로 작성해줄 수 있다.
- 유저가 지정한 특정 로케이션을 지도 정중앙으로 위치시키기
- 유저가 원하는 만큼 지도를 확대/축소 가능케하기
- 지도의 타입을 바꾸게 만들기 (로드맵, 위성, 하이브리드, 혹은 지형)
이때 이러한 옵션들은 코드로써 어디에 위치하게 될까? 이는 앞서 코드로 적은 jQuery중 .gmap()에서 괄호안에 들어간다. 이때 우리는 하나의 옵션이 아닌 여러개의 옵션들을 추가해줄 예정이므로 .gmap() 괄호 안 {}과 같은 중괄호를 추가하여 여러개의 옵션이 들어간다는 사실을 jQuery에게 알려야 한다. 예시는 다음과 같다.
$('#myMap').gmap({
'center': '37.531413, 126.913892'
});
Option: 'Center'
'center' 옵션은 위도와 경도를 기반으로 한 좌표를 찍어 특정 좌표에 위치한 장소가 지도에서 한가운데 보이도록 만들어 주는 옵션이다. 위에서 찍힌 좌표는 한국 국회의사당이 위치한 좌표이고 이러한 좌표의 특성상 지구상 어느 장소이든 좌표를 통해 지도에서 찾을 수 있게 만들어 줄 수 있다. 이때 의아할 점은 분명 나는 세부적인 좌표를 찍었는데 지도상에서 정확히 나오지 않는다는 점이다. 이는 확대기능이 추가되지 않았으므로 좌표가 센터에 위치하고는 있지만 엄청 멀리서 바라보았을때의 시점으로 지도가 보여진다는 점이다. 이는 다음에 소개될 'Zoom' 옵션을 추가하여 수정 가능하다.
Option: 'Zoom'
그렇다면 또한 Zoom 기능을 추가하여 지도상에서 특정 부분을 유저가 원하는 만큼만 확대 혹은 축소할 수 있다면 얼마나 좋을까? 이 또한 jQuery로 옵션으로써 추가 가능하며 이는 다음과 같다. Zoom 값은 0-25의 range만큼 고정되어 있으며 특정 장소는 19까지만 올라가는 경우도 있다. 이때 'center' 옵션 다음으로 'zoom'이라는 옵션을 추가해주면 쉽게 옵션을 추가해 줄 수 있다. 이때 중요한 점은 'center' 옵션으로 적어둔 값 마지막에 ','과 같은 Comma를 찍어주어야 jQuery에서 그 다음 옵션의 값이 추가된다는 것을 알 수 있다.
$('#myMap').gmap({
'center': '37.531413, 126.913892',
'zoom': 17
});
Option: 'MapTypeId'
앞서 언급했지만 지도를 설정하는 방법중 네 가지의 종류들이 있는데 이는 다음과 같다.
- 로드맵
- 위성
- 하이브리드
- 지형
이들은 각기 다른 형식의 지도를 보여주며 이는 'MapTypeId'와 같은 옵션을 추가하여 jQuery로써 설정해 줄 수 있다. 이는 간편하게 앞서 설정한 'Zoom' 옵션 다음으로 집어넣어 주면 되고 Comma를 붙여 옵션들끼리 기능을 나누는 것도 잊으면 안된다.
$('#myMap').gmap({
'center': '37.531413, 126.913892',
'zoom': 17,
'mapTypeId': google.maps.MapTypeId.SATELLITE // 위성
});
모든 지도 타입은 google.maps.MapTypeId.TYPE-OF-MAP 과 같은 형식으로 지정되며 마지막에 입력하는 지도의 종류는 대문자로 적혀져야 한다. 이를 통해 지도가 어떻게 보일 건지에 대해 다양하게 설정해 줄 수 있다.
4. Summary so far
지금까지 배운 내용들을 종합하여 보면 Google Map을 웹 페이지 안에 어떻게 삽입하고 특정 장소를 센터로 잡고 특정 레벨까지 확대한다음 지도의 타입을 바꾸는 내용까지 알아보았다. 그 다음에 배워볼 내용은 커스텀 마커와 레이블을 추가하여 더욱 다채로운 지도를 만들어 주는 것에 대해 알아보겠다.
5. Adding Custom Markers
커스텀 마커와 레이블을 추가하는 방식은 생각보다 쉽지만 코드가 꽤 장황하므로 주의깊게 살펴보는 것이 좋다. 우선 마커를 추가하려면 우리는 브라우저에게 어디다 추가해 줄지 알려주기 위해 위도와 경도를 기반으로 한 좌표를 다시 부여해주어야 한다. 이때 이 좌표는 앞서 작성한 'center' 옵션의 좌표를 똑같이 사용해도 된다. 이때 주의해야 할점은 마커와 레이블 또한 .gmap()의 괄호 안에 들어간다는 것을 알아야 한다. 이때 .ready(function() { }); 사이 안에 무조건 포함하고 있어야 함으로 코드를 작성할때 들여쓰기를 얼마나 신경써서 하느냐에 따라 가독성을 높임과 동시에 에러를 방지할 수 있다.
$(document).ready(function() {
$('#myMap').gmap('addMarker', {'position': '37.531413, 126.913892'});
});
우리는 <div>안에 있는 ID중 myMap이라는 요소를 타게팅하려 하고 'position'으로 지정된 좌표의 위치에 마커가 새겨진 지도를 삽입하려는 것을 알려야 한다.
6. Adding Custon Labels
이때 마커를 마우스로 클릭했을때 무언가 나타나게 하고 싶다면 어떻게 해야할까? 이는 다음과 같은 .click()이라는 function을 추가해 줌으로써 마우스가 클릭된다는 것을 알려줄 수 있다.
$('#myMap').gmap('addMarker', {'position': '37.531413, 126.913892'})
.click(function() {
// The code goes here
});
윗 코드에서 .click(function() { })에서 중괄호 사이안에 특정 코드를 넣어주면 된다. 이때 .click()에 대해 알아둘 사실은 이 function은 마우스를 클릭했을때 거의 모든 효과를 구현 가능하게 해줄 수 있다. 마치 비디오나 오디오 미디어 파일들을 재생시켜줄 수 있고 다른 웹페이지로 가게 만들어 줄 수 있고 이미지나 텍스트를 Fade-in 하여 나타나게 하거나 Animate하여 페이지안에 나타나게 해줄 수 있다. 이번 시간에 구현해볼 것은 Google Maps API에서 특정 마커에서 유저가 클릭했을시 라벨이 나타나게끔 만들어 주는 것이다. 이 때 다음과 같이 코드를 작성하여 볼 것이다.
$('#myMap').gmap('addMarker', {'position': '37.531413, 126.913892'}) // 특정 좌표에 마커를 표시하고
.click(function() { // 유저가 해당 마커를 클릭했을시
// 해당 지도안에 클릭된 위치에 (this) 'Text Goes Here'이라는 메세지를 가진 윈도우창을 띄우거라
$('#myMap').gmap('openInfoWindow', { 'content': '<p>Text Goes Here</p>' }, this);
});
아래에서 보이는 코드 중 'content' 옵션은 하이퍼링크나 이미지를 그 부분안에 암호화 하여 집어넣어주게 만드는 옵션이다. 이러한 content가 삽입된 요소를 클릭했을씨 'openInfoWindow' 옵션을 통해 팝업처럼 나타나도록 세팅을 해줄 수 있게끔 만들어 보았다. 방금 전 코드를 입력했을시 유저가 마커를 클릭했을때 텍스트 블럭이 뜨면서 Text Goes Here과 같은 말이 뜨는 것을 알 수 있다.
이러한 과정을 여러번 반복하여 다른 좌표에 있는 여러개의 마커와 레이블들을 만들어 줄 수 있다.
$(document).ready(function() {
$('#myMap').gmap('addMarker', {'position': '37.531413, 126.913892'}) // 특정 좌표에 마커를 표시하고
.click(function() { // 유저가 해당 마커를 클릭했을시
// 해당 지도안에 클릭된 위치에 (this) 'Text Goes Here'이라는 메세지를 가진 윈도우창을 띄우거라
$('#myMap').gmap('openInfoWindow', { 'content': '<p>Text Goes Here</p>' }, this);
});
$('#myMap').gmap('addMarker', {'position': '-23, 15.1235'}) // 특정 좌표에 마커를 표시하고
.click(function() { // 유저가 해당 마커를 클릭했을시
// 해당 지도안에 클릭된 위치에 (this) 'Text Goes Here'이라는 메세지를 가진 윈도우창을 띄우거라
$('#myMap').gmap('openInfoWindow', { 'content': '<p>Text Goes Here</p>' }, this);
});
$('#myMap').gmap('addMarker', {'position': '-2, 145.1235'}) // 특정 좌표에 마커를 표시하고
.click(function() { // 유저가 해당 마커를 클릭했을시
// 해당 지도안에 클릭된 위치에 (this) 'Text Goes Here'이라는 메세지를 가진 윈도우창을 띄우거라
$('#myMap').gmap('openInfoWindow', { 'content': '<p>Text Goes Here</p>' }, this);
});
});
또한 이와 같이 방금 전 배운 여러 옵션들을 마커와 레이블과 함께 추가하여 만들고 싶다면 다음과 같이 코드를 적어 여러개의 옵션들을 한번에 보이도록 만들어 줄 수 있다.
<script>
$(document).ready(function() {
$('#myMap').gmap({
'center': '37.531413, 126.913892', // 특정 좌표를 센터로 잡고
'zoom': 17, // 17만큼 확대하고
'mapTypeId': google.maps.MapTypeId.SATELLITE // 위성뷰로 보이게 하라
});
$('#myMap').gmap('addMarker', {'position': '37.531413, 126.913892'}) // 특정 좌표에 마커를 표시하고
.click(function() { // 유저가 해당 마커를 클릭했을시
// 해당 지도안에 클릭된 위치에 (this) 'The National Assembly Building'이라는 메세지를 가진 윈도우창을 띄우거라
$('#myMap').gmap('openInfoWindow', { 'content': '<p>The National Assembly Building</p>' }, this);
});
});
</script>
이번에 배웠던 내용들은 지난 시간에 알아보았던 내용들보다 생각보다 코드가 장황한 면이 많아 햇갈렸던 부분들이 조금 있었겠지만 웹사이트를 구축함에 있어 사용자의 sophisticated level of engagement (정교한 참여의 수준) 가능성을 부여한다는 점에 있어 아주 유용한 정보가 될것으로 생각한다. 지도를 웹사이트에 삽입하는데 있어 유저들에게 해당 장소를 알 수 있으므로 더욱 편리하게 작용한다는 점도 아주 쓸모 있게 느껴질 것이다.
'Web Design & Development > Front End_Web Development' 카테고리의 다른 글
| Module 9 - CSS Animation for Beginners (0) | 2022.10.19 |
|---|---|
| Module 7 - Audio and Video (1) | 2022.09.23 |
| Module 6 - Google Fonts & scrollTop (1) | 2022.09.23 |
| Module 5 - jQuery and the DOM (1) | 2022.09.23 |
| Module 4 - Introducing jQuery (1) | 2022.09.22 |