J-QUERY로 구글맵 띄우기!!
Google Maps JavaScript API 사용법
HTML5와 GeoLocation API
최근 스마트폰 앱들은 위치정보와 지도정보를 활용한 다양한 서비스를 제공하고 있습니다.
HTML5에는 GeoLocation API를 이용하여 현재 사용자의 위치정보를 얻을 수 있는 자바스크립트 명령을 제공해 줍니다. GeoLocation API 는 모바일 디바이스의 위치정보를 사용할 수 있는 자바스크립트 형식의 명령 집합을 의미합니다.
<script>
// 이 예제는 반드시 스마트폰에서 실행해야 결과를 얻을 수 있습니다.
// PC 브라우저에서는 결과값을 얻지 못합니다.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,handleError);
} else {
alert('브라우저가 GeoLocation을 지원하지 않습니다!');
}
</script>
navigator 객체에 들어 있는 geolocation 속성의 반환값이 True이면 GeoLocation을 지원하며, 반대로 False 이면 지원하지 않습니다. 또한 geolocation 속성에 들어 있는 getCurentPosition 메서드를 호출하면 현재의 위치정보를 얻을 수 있습니다. 이때 매개변수로 콜백 함수를 전달해야 합니다. 콜백함수란 실행이 끝난 뒤에 호출되는 함수를 의미합니다. 여기서는 얻은 위치값을 화면에 출력할 목적으로 showPosition함수가 실행되고, 만약 에러가 발생하면 그 내용을 알기 위해 handleError 함수가 사용됩니다.
이런한 코드만으로도 누구나 쉽게 위치정보를 얻을 수 있는 것은 아닙니다. 개인의 위치정보가 부도덕한 목적으로 사용된다면 오히려 사회문제를 일으킬 수 있기 때문입니다. 그래서 반드시 사용자의 동의를 받아야만 위치정보를 제공받을 수 있도록 제한하고 있습니다.
function showPosition(position) {
alert('위도:' + position.coords.latitude + ', 경도:' + position.coords.longitude );
}
function handleError(evt) {
alert(evt.message);
}
위 예는 간단하게 만들어진 콜백 함수입니다. showPosition 은 position 매개변수를 가지고 있어서 여기서 얻은 위치정보 결과 값이 들어옵니다. 따라서 간단하게 alert() 함수를 실행해서 위도와 경도 값을 문장으로 만들어 출력합니다. 만약 에러가 발생하면 마찬가지로 alert() 함수를 통해서 에러 메시지를 알려줍니다.
만약 위의 예를 데스크톱 PC 로 실행하면 GPS 가 없으므로 아무런 값도 얻지 못합니다. 반드시 스마트폰이나 GPS 가 들어 있는 모바일 디바이스에서 테스트해야 합니다.
JQuery-UI-Map이란 무엇인가?
HTML5 GeoLocation API 는 위치정보를 얻을 수 있도록 해주지만 지도를 지원하는 것은 아닙니다. 지도와 연결해서 위치를 표시하는 다양한 응용 방법을 위해서는 구글 맵 자바스크립트 API를 별도로 또 공부해 합니다. 여기서부터 점점 어려운 길로 접어듭니다. 하지만 다행스럽게도 이 문제를 해결하기 위해 JQuery-UI-Map 이 준비되어 있습니다.
JQuery-UI-Map은 JQuery를 사용해서 HTML5의 Geolocation과 구글 자바스크립트 API를 손쉽게 사용할 수 있도록 도와주는 오픈 소스 라이브러리입니다. 더욱이 JQuery Mobile 까지 지원해 주니 정말 편리합니다. JQuery-UI-Map 은 HTML5 의 Geolocation API 와 구글 맵 API를 연동하여 JQuery 방식으로 쉽게 사용할 수 있도록 도와주는 자바스크립트 라이브러리라고 할 수 있습니다.
https://code.google.com/archive/p/jquery-ui-map/
JQuery-UI-Map 의 특징을 정리하면 다음과 같습니다.
- 구글 맵 API를 쉽게 사용할 수 있도록 도와줍니다.
- JQuery, JQuery Mobile을 지원합니다.
- 용량이 3.8KB 밖에 되지 않는 아주 콤팩트한 라이브러리입니다.
JQuery-UI-Map 의 가장 큰 강점은 JQuery Mobile 과 호환된다는 것입니다. 다양한 데모 예제가 준비되어 있어 응용하기 쉽습니다.
파일 다운로드
먼저 준비할 것은 파일입니다.
https://code.google.com/archive/p/jquery-ui-map/downloads
에 접속한 후 [Download]를 선택합니다. 그리고 jquery-ui-map-3.0-rc.zip 최신 파일을 다운로드 받습니다.
파일을 다운로드 받은 후 압축을 풀면 라이브러리의 파일과 예제 파일이 들어 있습니다.
여기서 필요한 것은 ‘ui’ 폴더입니다. 이 폴더를 자신의 작업 폴더에 복사해 넣습니다. 주요 폴더의 용도를 설명하면 다음과 같습니다.
|
파일이름 |
용도 설명 |
|
ui |
JQuery-UI-Map을 실행하기 위한 다양한 UI내용 JQuery 라이브러리가 들어 있습니다. |
|
demos |
다양한 방법의 예제 파일이 들어 있습니다. 하나씩 열어서 실행해 보면 도움되는 것이 많이 있습니다. 특히 JQuery Mobile을 활용한 예제도 많이 들어 있습니다. |
사용할 파일 선언하기
다음에서 첫 번째 것은 구글 맵 자바스크립트 API를 사용하기 위해 CDN을 포함시킨 것입니다. 특히 GPS 센서가 들어 있는 스마트폰의 기능을 사용해서 현재 위치를 찾고 싶다면 반드시 추가해 주어야 합니다. 반면에 두 번째와 세 번째는 별도로 제공되는 CDN 이 없으므로 자신의 작업 폴더에서 직접 연결해서 사용해야 합니다.
<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="ui/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.extensions.js" type="text/javascript"></script>
구글 맵에 표시하기
이제 본격적으로 구글 맵에 원하는 부분을 표시해 보겠습니다. 먼저 원하는 위치를 표시하기 위해서는 그 위치에 해당하는 위도와 경도 값을 알아야 합니다. 위도와 경도 값을 얻는 가장 손쉬운 방법은 구글 맵 서비스(영문)를 이용하는 것입니다.
구글 맵 사이트(영문)에 접속한 후에 지도상에서 원하는 지역을 검색하고 마우스 커서를 특정 장소에 가져다 놓습니다. 그리고 오른쪽 버튼을 누른 후에 팝업 메뉴에서 What’s here? (이 곳이 궁금한가요?)‘ 메뉴를 선택합니다. 그러면 그 위치의 위도와 경도 값을 검색 창에 표시해 줍니다.
그 다음에는 구글 맵 API를 사용해서 위도와 경도 값의 객체 변수를 생성해 줍니다. 구글 맵 API 의 위도와 경도 값을 생성하기 위한 google.maps.Latlng 클래스의 생성자 사용 형식은 다음과 같습니다.
|
google.maps.LatLng Class ▶ lat, lng : 위도, 경도값 |
실전 예
var StartLatLng = new google.maps.LatLng(37.286946, 127.011139);
위도와 경도 값을 매개변수로 넘겨주면 됩니다. 유의할 점은 위도와 경도의 순서가 뒤바뀌지 않도록 조심해야 한다는 것입니다. 위 예는 google.map.LatLng 의 클래스를 new 키워드를 이용해서 위도와 경도 값을 지정해서 위도와 경도 값을 가지는 객체를 생성하는 모습입니다. 이렇게 생성된 객체는 StartLatLng 객체변수에 대입합니다.
그 다음에 JQuery를 사용해서 HTML 중에서 원하는 태그만 선택자로 찾은 후에 JQuery-UI-Map 의 핵심 명령인 gmap을 실행합니다. gmap 은 새로운 지도를 하나 생성하면서 동시에 구글 맵 자바스크리트 API를 실행하도록 도와줍니다. 구글 맵 자바스크립트 API에서 필요한 메서드 실행이나 다양한 속성값 변경을 쉽게 처리할 수 있습니다. 메서드를 실행할 때는 콜백 함수를 전달하면 되고 속성값을 변경할 때는 JSON 형식으로 속성 이름과 속성값을 쌍으로 묶어서 전달하면 됩니다. 이처럼 JQuery-UI-Map 은 JQuery 와 구글 맵 자바스크립트 API 사이의 중간 역할을 해줍니다.
다음은 gmap 클래스 생성자의 사용법입니다.
|
jquery.ui.map ▶ 새로운 지도를 생성한 후에 속성값 설정됨 |
gmap 클래스의 목적은 지도를 만들고 속성값을 설정한 후에 그 결과를 반환해 주는 것입니다. 매개변수로는 google.maps.MapOptions에 선언된 다양한 속성으로 JSON 형식으로 넘겨주어 생성된 지도의 모양을 변경할 수 있습니다. 여기서 “?:” 의 의미는 선택적 매개변수라는 뜻입니다. 쉽게 얘기하면 사용해도 되고 생략해도 된다는 것입니다.
예를 들어 google.maps.MapOptions 객체에 다음처럼 center 와 zoom 속성이 선언되어 있습니다.
|
구글 맵 자바스크립트 API |
이 두 가지 속성값을 gmap을 이용해서 변경해 보겠습니다. 만약에 center 위치는 StartLatLng 변수의 값을 대입하고,
zoom 은 16배 확대하고 싶다면 다음처럼 JSON을 작성하면 됩니다.
{“center” :StartLatLng, “zoom”;16}
그리고 나서 이것을 다음처럼 gmap 생성자의 매개변수로 전달하면 됩니다.
$("#map_canvas").gmap({"center": StartLatLng, "zoom":16});
[ ... ]
<div id="map_canvas" class="map_style"></div>
위 경우는 #map_canvas라는 ID 선택자가 지정된 div 엘리먼트에 지도를 표시하는 경우입니다. 먼저 JQuery 의 $(“#map_canvas”)를 사용해서 div 엘리먼트를 선택합니다. 그 위치에 gamp을 사용해서 지도를 하나 만들어 주는데 ‘center’ 속성을 사용해서 StartLatLng 객체 변수에 들어 있는 위도/경도 값을 대입합니다. 또한 ‘zoom’ 속성을 사용해서 16배 확대를 지정합니다. 그러면 간단하게도 이 명령어 하나로 div 엘리먼트 안에 원하는 지도가 나타납니다.
구글 맵 표시하기 실습
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- JQuery Mobile을 사용하기 위해 반드시 필요한 태그-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="ui/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.extensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var StartLatLng = new google.maps.LatLng(37.286946, 127.011139);
$("#map_canvas").gmap({
"center":StartLatLng , "zoom":17
});
});
</script>
<style type="text/css">
.map_style{
padding:0px
height: 100%
width: 100%
}
</style>
</head>
<body>
<div data-role="page" id="page" class="map_style">
<div data-role="header" data-theme="b">
<h1>캠퍼스 맵</h1>
</div>
<div data-role="content" class="map_style">
<div id="map_canvas" class="map_style"></div>
</div>
</div>
</body>
</html>
결과 ==>
http://braverokmc2.dothome.co.kr/junho/ex16/map.html
16-2 현재 내 위치 찾아보기
현재 위치를 얻어서 그 영역을 지도에 표시하기
이번에는 gmap을 활용해서 HTML5 GeoLocation API를 실행해 보겠습니다. 특히 현재 위치를 찾는 방법으로 활용해 보겠습니다. 먼저 gmap 의 두 번째 매개변수 형식인 콜백 함수의 사용법을 살펴보면 다음과 같습니다.
| jquery.ui.map gmap(함수명, function{} ) 생성자 as $(google.maps.Map 클래스) - 새로운 지도를 생성한 후에 함수명이 실행됨. function 매개변수에 함수 실행 후 결과값이 전달됨 - 매개변수 사용법: 예) function(result) { ... } result 에 함수실행 결과가 반환됨 - |
gmap을 사용하면 매개변수를 사용해서 jquery.ui.map 에 선언된 메서드 말고도, HTML5에 있는 navigator.geolocation 객체에 있는 함수를 실행할 수 있습니다. 이미 앞에서 자바스크립트를 통해서 사용하는 방법을 살펴보았듯이 긴 객체명을 일일이 지정하고 콜백 함수를 별도로 선언하는 것이 불편합니다. 반면에 gmap을 이용하면 짧은 명령으로 간단히 처리할 수 있으며 콜백 함수를 결과값을 받아 JQuery 방식으로 그 자리에서 사용하는 것이 훨씬 간단합니다.
// 이 예제는 반드시 스마트폰에서 실행해야 결과를 얻을 수 있습니다.
// PC 브라우저에서는 결과값을 얻지 못합니다.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,handleError);
} else {
alert('브라우저가 GeoLocation을 지원하지 않습니다!');
}
function showPosition(position) {
alert('위도:' + position.coords.latitude + ', 경도:' + position.coords.longitude );
}
function handleError(evt) {
alert(evt.message);
}
=>
$("#map_canvas").gmap("getCurrentPosition" , function(position, status) { .... });
이 경우는 HTML5의 geolocation을 통해서 현재 위치를 찾을 때 자바스크립트를 사용한 세줄의 명령을 jQuery 의 gmap 방식으로 한 줄로 줄인 것입니다. 위 코드를 보면서 Jquery와 gmap의 간결함에 놀랄 것입니다. 결국 다음처럼 status 값을 if로 조건식을 만들고 각 조건에 맞게 처리할 수 있습니다.
$("#map_canvas").gmap("getCurrentPosition" , function(position, status) {
if ( status === "OK" ) {
} else {
alert("현재위치를 찾을 수 없습니다. ");
}
}); //$("#map_canvas").gmap() 끝
여기서는 gmap 의 첫 번째 매개변수로 H씌5 GeoLocation API 의 getCurrentPosition 함수를 실행하겠다고 전달합니다. 그 다음 콜백 함수로 function(position, status) {} 라고 선언해서 실행이 끝나면 position, status 라는 두 개의 매개변수로 값을 전달받고 필요한 내용을 콜백 함수 안에서 처리합니다. 이 경우는 현재 위치를 정상으로 찾았는지 여부를 if 문으로 판단하여 적합한 내용을 처리합니다.
만약 현재 위치를 찾으면 그 위치로 지도를 이동해 주어야 합니다. 그 방법은 구글 맵의 panTo(); 메서드를 이용하면 됩니다.
구글 맵 자바스크립트 API
| google.maps.Map 클래스 - panTo(LatLng: google.maps.LatLng) 메서드 |
선언을 보면 알겠지만 panTo() 메서드는 google.maps.Map 클래스에 속해 있으며 google.maps.LatLng 클래스로 만들어진 위도/경도 값의 객체를 매개변수로 전달하면 됩니다.
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var curMap =$(“#map_canvas”).gmap(“get”, “map”); //화면의 지도를 얻음
curMap.panTo(latlan); // 다른 위치로 화면 이동
=>
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var markerBlue = "http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
$("#map_canvas").gmap("get", "map").panTo(latlng);
$("#map_canvas").gmap("addMarker", {"position": latlng, "icon": markerBlue});
여기서는 latlng 변수에 매개변수 position에 들어 있는 위도와 경도 값을 저장합니다. 방법은 google.map 객체에 들어 있는 LanLng 속성을 new 키워드를 이용해서 생성자의 매개변수로 위도(position.coords.latitude) 와 경도 (position.coords.longitude) 값을 전달해서 생성한 후에 latlng 변수에 대입하여 저장해 둡니다. 그러고 나서 $를 사용해서 #map_cavas의 ID 선택자로 지정된 div 엘리먼트를 선택합니다. 선택된 div 엘리먼트에 만들어진 지도의 map 객체를 꺼내야 하는데 방법은 gmap 의 get 메서드를 이용합니다. 그리고 방금 배운 panTo() 메서드를 통해서 화면을 사용자의 현재 위치로 이동시킵니다.
여기서 gmap 의 get 메서드 사용법에 대하여 조금 더 설명할 필요가 있습니다. 사용 형식은 다음과 같습니다.
| jquery.ui.map gmap(“get”, name:string) 메서드 as object -> 얻고자 하는 객체의 이름을 name에 지정하면 해당 객체가 반환됨 예) 지도 : “map” |
실제 예
var curMap =$(“#map_canvas”).gmap(“get”, “map”); //화면의 지도를 얻음
위의 경우처럼 gmap 의 첫 번째 매개변수에 get 메서드를 전달해 주고, 두 번째 매개변수에 얻고자 하는 객체의 이름을 전달하면 됩니다. 이 경우에는 지도를 얻고 싶으므로 map 이라고 입력하면 그 결과가 curMap 객체변수에 저장됩니다.
현재 위치에 마커 아이콘 추가하기
이번에는 사용자와 상화작용 할 수 있는 기능을 넣어보겠습니다. 즉, 사용자가 단추를 누르면 현재 지도에 마커가 표시되도록 하겠습니다. 마커는 보통 핀 모양의 아이콘을 사용하는데, 현재 인터넷에 호스팅되어 있는 이미지 아이콘을 먼저 준비해야 합니다. 물론 직접 디자인해서 자신의 서업에 올려놓아도 되지만, 구글에서 무료로 제공하는 아이콘을 사용하면 편리합니다.
이 중에서 마음에 드는 아이콘을 마우스 오른쪽 버튼으로 눌러 나타난 팝업 창에서 속성 메뉴를 클릭하여[복사] 항목을 선택하면 인터넷 주소를 얻을 수 있습니다. 그 주소를 다음처럼 markerBlue 라는 변수에 임시로 저장해 둡니다.
var markerBlue = "http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
이제 원하는 위치에 이 마커를 표시해 보겠습니다. gmap 의 addMarker 메서드를 사용하면 됩니다.
사용법
| jquery.ui.map gmap(“addMarker”, opts ? : MarkerOptions) 메서드 as $(google.maps.Marker 클래스) 반환 -> opts 매개변수 사용법 : 예 ) { 속성이름 : 속성값, ... }처럼 JSON 형식으로 사용하면 됨 예) “icon” : 마커 이미지 경로, “position” : 마커가 위치할 위도/경도값 |
실전예
$("#map_canvas").gmap("addMarker", {"position": latlng, "icon": markerBlue});
gmap 의 addMarker 메서드를 사용해서 google.maps.MarkerOptions 중에서 position의 위치값과 icon 의 이미지 경로값을 설정해서 마커를 추가하는 예입니다.
내 위치 찾아 표시하기 실습
이미지
소스
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- JQuery Mobile을 사용하기 위해 반드시 필요한 태그-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="ui/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.extensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//초기 위치를 장안공원 설정
var StartLatLng = new google.maps.LatLng(37.286946, 127.011139);
$("#map_canvas").gmap({"center": StartLatLng, "zoom":17});
// <현위치> 버튼 처리
$("#current_location").click(function() {
$("#map_canvas").gmap("getCurrentPosition" , function(position, status) {
if ( status === "OK" ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var markerBlue = "http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
$("#map_canvas").gmap("get", "map").panTo(latlng);
$("#map_canvas").gmap("addMarker", {"position": latlng, "icon": markerBlue});
} else {
alert("현재위치를 찾을 수 없습니다. ");
}
}); //$("#map_canvas").gmap() 끝
}); // $("#current_location").click() 끝
}); // $(document).ready() 끝
</script>
<style type="text/css">
.map_style {
padding: 0px;
height:100%;
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="page" data-fullscreen="true" class="map_style">
<div data-role="header" data-position="fixed" data-theme="b" data-fullscreen="true">
<h1>캠퍼스 맵</h1>
</div>
<div data-role="content" class="map_style">
<div id="map_canvas" class="map_style"></div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" >
<ul>
<li><a href="#" data-icon="search" id="current_location">현위치 찾기</a></li>
</ul>
</div> <!-- navbar 끝 -->
</div>
</div>
</body>
</html>
결과>>
http://braverokmc2.dothome.co.kr/junho/ex16/map2.html
마커 아이콘이 나오지 않음
마커 아이콘 터치 시 풍선 도움말 설명 표시하기
마커 아이콘 터치 시 풍선 도움말이 나타나도록 해보겠습니다.
이 기능을 수행하려면 먼저 마커를 표시한 후에 다음처럼 그 마커의 객체변수를 얻어야 합니다.
var curMarker = $("#map_canvas").gmap("addMarker", {"position": StartLatLng,"icon": markerRed});
gmap의 “addMarker” 메서드를 사용해서 StartLatLng 위치에 markerRed라는 아이콘 이미지를 올려놓습니다. 그러고 나서 반환값을 curMarker 객체변수에 저장합니다. 이때 curMarker 의 자료형은 무엇인지 궁급해집니다. 앞절의 “addMarker” 메서드의 선언 형식을 다시 보도록 하겠습니다.
사용법
|
jquery.ui.map |
마커를 생성한 후에 반환값은 google.maps.Marker 클래스로 만들어진 마커 객체입니다. 그리고 이 마커 객체를 $로 감싸서 JQuery 로 다시 쓸 수 있도록 바꿔줍니다.
다음 단계로는 이 마커의 click() 이벤트 핸들러를 사용해서 상요자가 마커를 터치했을 때 어떻게 할지 처리합니다.
|
구글 맵 자바스크립트 API google.maps.Marker class - click() 이벤트가 처리된 후에 콜백 함수로 function() {....} |
JQuery를 사용할 때 어렵게 느껴지는 것은 콜백 함수를 많이 이용하기 때문입니다.
click() 이벤트 핸들러 매개변수에 다시 function(){...}을 넣어서 콜백 함수로 처리한다는 개념은 처음 접하는 분에게는 무척 생소할 것입니다. 사용자가 터치하여 이벤트가 발생하면 이벤트의 처리가 끝난 것이므로 콜백 함수로 순서가 이어져 function() {....} 이 실행되는 것이므로 실행 흐름은 자연스럽습니다. 마커를 클릭하면 click() 이벤트 핸들러 안에 있는 function() {...} 부분이 실행된다고 보면 됩니다.
마커를 터치하면 풍선 도움말을 띄워야 합니다. 풍선 도움말을 띄우는 메서드는 gmap 의 “openInfoWindow” 이며 사용 형식은 다음과 같습니다.
|
jquery.ui.map - opts 매개변수 사용법 : 예) {속성이름 : 속성값,... } 의 JSON 형식으로 사용하면 됨. |
curMarker.click( function() {
$("#map_canvas").gmap("openInfoWindow", { "content": "안산대학교 진리관"},this);
});
curMarker 에 담겨 있는 마커 객체가 사용자에 의해서 터치되면 gmap의 “openInfoWindow” 메서드를 실행해서 “content” 속성에 “안산대학교 진리관” 이라는 문자열을 전달하여 표시합니다. 마지막 매개변수로 this를 넘긴 것은 click() 이벤트 핸들러가 실행되는 주체는 curMarker 자기 자신이기 때문입니다. 따라서 curMarker를 의미하므로 풍선 도움말은 curMarker 위에 표시됩니다.
캠퍼스 맵 완성하기 실습
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- JQuery Mobile을 사용하기 위해 반드시 필요한 태그-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="ui/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.extensions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//초기 위치를 안산대학교로 설정
var StartLatLng = new google.maps.LatLng(37.30981, 126.87560);
$("#map_canvas").gmap({"center": StartLatLng, "zoom":16});
// <현위치> 버튼 처리
$("#current_location").click(function() {
$("#map_canvas").gmap("getCurrentPosition" , function(position, status) {
if ( status === "OK" ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var markerBlue = "http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
$("#map_canvas").gmap("get", "map").panTo(latlng);
$("#map_canvas").gmap("addMarker", {"position": latlng, "icon": markerBlue});
} else {
alert("현재위치를 찾을 수 없습니다. ");
}
}); //$("#map_canvas").gmap() 끝
}); // $("#current_location").click() 끝
// <핀놓기> 버튼 처리
$("#put_pin").click(function() {
// 안산대학교 진리관으로 설정
var StartLatLng = new google.maps.LatLng(37.31032, 126.87645);
var markerRed = "http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png";
$("#map_canvas").gmap("get", "map").panTo(StartLatLng);
var curMarker = $("#map_canvas").gmap("addMarker", {"position": StartLatLng,"icon": markerRed});
curMarker.click( function() {
$("#map_canvas").gmap("openInfoWindow", { "content": "안산대학교 진리관"},this);
});
//$("#map_canvas").gmap("addMarker", {"position": StartLatLng,"icon": markerRed}).click(function() {
// $("#map_canvas").gmap("openInfoWindow", { "content": "안산대학교 진리관"},this);
//}); // $("#map_canvas").gmap("addMarker"") 끝
}); // $("#put_pin") 끝
}); // $(document).ready() 끝
</script>
<style type="text/css">
.map_style {
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="page" data-fullscreen="true" class="map_style">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="index.html" rel="external" data-icon="home" >Home</a>
<h1>캠퍼스 맵</h1>
</div>
<div data-role="content" class="map_style">
<div id="map_canvas" class="map_style"></div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b" >
<div data-role="navbar" >
<ul>
<li><a href="#" data-icon="search" id="current_location">현위치 찾기</a></li>
<li><a href="#" data-icon="grid" id="put_pin">핀놓기</a></li>
</ul>
</div> <!-- navbar 끝 -->
</div>
</div>
</body>
</html>
- rel=“external” 을 통해서 JQuery Mobile을 한번 초기화해서 페이지 간 이동을 할 경우 JQuery 가 서로 엉키지 않도록 해줍니다.
index.html
<li><a href="map.html" rel="external" >
<img src="images/map_i.png" alt="" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스맵</h3>
</a>
</li>
도전 미션
마커 콘텐츠의 내용 디자인 하기
"<b>안산대학교 진리관</b><img src='icon02.png' alt='' />"
var markerRed = "http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png";
var curMarker = $("#map_canvas").gmap("addMarker", {"position": StartLatLng, "icon": markerRed});
curMarker.click( function() {
$("#map_canvas").gmap("openInfoWindow", { "content": "<b>안산대학교 진리관</b><img src='icon02.png' alt='' />"},this);
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- JQuery Mobile을 사용하기 위해 반드시 필요한 태그-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="ui/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 안산대학교 진리관으로 설정
var StartLatLng = new google.maps.LatLng(37.31032, 126.87645);
$("#map_canvas").gmap({"center": StartLatLng, "zoom":16});
var markerRed = "http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png";
var curMarker = $("#map_canvas").gmap("addMarker", {"position": StartLatLng, "icon": markerRed});
curMarker.click( function() {
$("#map_canvas").gmap("openInfoWindow", { "content": "<b>안산대학교 진리관</b><img src='icon02.png' alt='' />"},this);
});
//}); // $("#map_canvas").gmap("addMarker"") 끝
}); // $(document).ready() 끝
</script>
<style type="text/css">
.map_style {
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="page" data-fullscreen="true" class="map_style">
<div data-role="header" data-position="fixed" >
<a href="index.html" rel="external" data-icon="home" >Home</a>
<h1>캠퍼스 맵</h1>
</div>
<div data-role="content" class="map_style">
<div id="map_canvas" class="map_style"></div>
</div>
<div data-role="footer" data-position="fixed">
<h2>마커 디자인하기</h2>
</div>
</div>
</body>
</html>
결과>>
http://braverokmc2.dothome.co.kr/junho/ex16/mission.html
28강
29강 ( 16-2. 구글맵 표시하기 실습 )
댓글 ( 4)
댓글 남기기