본문 바로가기
✍ 따뜻한 개발 공부

[api] 구글 map x , 카카오 map x ! 구글 회원가입없이 홈페이지 지도 만들기 / api 이용하여 사이트에 현재 위치 표시하기

by 따따시 2022. 9. 3.

 

 

구글 api 를 적용하려면, 구글 클라우드에 들어가서 카드 등록(돈은 안나가지만) 을 하고

여러 과정을 거쳐야하는데, 회원가입없이(물론 위치가 정확하진 않지만) 간단하게 현재 나의 사이트에

민간 개발자분들이 만든 api를 이용하여 지도를 표시하는 프로젝트를 해보았다.

 

 

 

😎 따따시는 어떤 걸로 작업을 했지유?

-> spring mvc 프로젝트를 이용하여 작업

 

 

먼저, home.jsp의 코드 내용

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<!--jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--propper jquery -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!--latest javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>


<a href="currPosMap" class="btn btn-danger">현재 위치 지도에 표시</a>
<a href="watchPos" class="btn btn-success">이동하는 위치 표시하기</a>
<h3>GEOLOCATION GetCurrentPosition</h3>
<hr/>

<div id="msg">이곳에 현재 지도 위 표시</div>


<script>

//map정보처리는 window.navigator,geolocation 객체가 처리
if(navigator.geolocation){ //geolocation지원 여부 처리
	navigator.geolocation.getCurrentPosition(success);
	//getCurrentPosition(callback)은 현재위치를 반환하는 메서드
	//callback함수는 파라메터로 현재의 위치값을 갖는 객체를 사용 (success안에 실제 위치값을 갖는 게 들어간다)
	//파라메터 형식
	/*
	let position = {
		coords : { //coords(좌표라는 뜻)
			latitude : Number(37.5882), //위도
			longitude : Number(127,009), //경도
			accuracy : Number(1257.05) //정확도
		}
	}
	
	*/
	
	
}

else{
	
	alert("map지원 안함")
	
}

function success(position) {
	
	let lat = position.coords.latitude;
	let lon = position.coords.longitude;
	let acc = position.coords.accuracy;
	
	//위도,경도의 소수점 이하가 너무 기므로 유효숫자 6자리로 조정
	
	lat = lat.toPrecision(6);
	lon = lon.toPrecision(6);
	
	let now = new Date(); //현재 시간
	
	let msg = "현재 시간: " + now.toUTCString() + "<br/>"; //now.toUTCString(now객체를 문자열로 바꾸어줌)
	msg += "현재 위치: (위도는 " + lat + " 도 이고 , 경도는 " + lon + " 입니다.) <br/> ";
	msg += "정확도: " + acc + "m<br/>";
	$("#msg").html(msg);
	
}
	
	
	

</script>

</body>
</html>

 

 

이건 currPosMap.jsp 내용!

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> 
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- MS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8,IE=EmulateIE9"/> 
<meta id="_csrf" name="_csrf" content="${_csrf.token}"/> <!-- 페이지위조요청을 방지를 위한 태그 -->
<title>Home</title>
<!--bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<!--jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--propper jquery -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!--latest javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<!--fontawesome icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" 
	integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!--google icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<h3>현재위치 지도에 표시(openstreammap활용)</h3> <!-- 오픈스트림맵은 민간단체 운용하는 맵으로 별로 사용안함 -->
<hr/>

<div id="msg">이곳에 위치 정보 출력</div>

<!-- 지도 표시 영역  -->
<iframe id="map" src="#" style="width : 425px; height:350px; border:1px solid red; margin:0; overflow:auto;" >
지도 표시 영역
</iframe><br/>

<a id="bigmaplink" target="_blank" href="">새 창에 큰 지도 보기</a>
<script>
if(navigator.geolocation)
	navigator.geolocation.getCurrentPosition(success);
else
	alert("지원하지 않음");
	
function success(position) {

	let lat = position.coords.latitude;
	let lon = position.coords.longitude;
	let acc = position.coords.accuracy;
	
	lat = lat.toPrecision(6);
	lon = lon.toPrecision(6);
	
	let map = document.getElementById("map");
	
	map.src = "http://www.openstreetmap.org/export/embed.html?bbox="
	+ (parseFloat(lon)-0.01)+"%2C" +(parseFloat(lat)-0.01) + "%2C" 
	+ (parseFloat(lon)+0.01) +"%2C"+(parseFloat(lat)+0.01);
	
	let maplink = document.getElementById("bigmaplink");
	let zoom = 15; //zoom확대율
	maplink.href = "https://www.openstreetmap.org/#map=" + zoom + "/" + lat + "/" + lon;
}
</script>
</body>
</html>

 

그리고 마지막으로 watchPosition.jsp 내용

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

<h3>watchPositon()으로 반복 위치 서비스</h3>
<hr/>

<div id="msg">이곳에 위치 정보 출력</div>


<!-- 지도 표시 영역  -->
<iframe id="map" src="#" style="width : 425px; height:350px; border:1px solid red; margin:0; overflow:auto;" >
지도 표시 영역
</iframe><br/><br/>

<script>
//watchPosition(callback,error,options)
//GeolocationPositionError객체로 옵션
//PositionOption 객체 사용(option)
let options = {
		
		enableHighAccuracy: false,
		timeout : 5000,
		maximumAge:0
	
}

let count=0;
let watchID;
if(navigator.geolocation){
	watchID = navigator.geolocation.watchPosition(changed, null, options);
	
}
else {
	
	alert("지원안함");
}

function changed(position) {
	if(count ==5) {
		navigator.geolocation.clearWatch(watchID);
		document.getElementById("msg").innerHTML="위치 서비스 종료";
		return ;
		
	}
	
	let lat = position.coords.latitude;
	let lon = position.coords.longitude;
	let text = count + ":(위도)" + lat + ",경도" + lon + "로 변경되었습니다";
	let map = document.getElementById("map");
	

	map.src = "http://www.openstreetmap.org/export/embed.html?bbox="
	+ (parseFloat(lon)-0.01)+"%2C" +(parseFloat(lat)-0.01) + "%2C" 
	+ (parseFloat(lon)+0.01) +"%2C"+(parseFloat(lat)+0.01);
	
	count++;
	
}
</script>



</body>
</html>

 

 

유투브를 보면서, 요즘 코딩이 쉬워진 이유 영상을 본 적 있는데

그 개발자 유투버님이 말한대로 api를 사용하면 복잡한 코드 구현을 하지 않아도 되고

정해져있는 코드를 복사해서 실현시키면 된다는 생각이 드넹

 

남이 만들어놓은 것을 잘 활용하고, 사용자가 편하게 이용할 수 있다면 사실 그게 목적 달성아닐까?

 

'✍ 따뜻한 개발 공부' 카테고리의 다른 글

[CSS] ellipsis 기능 / 넘치는 문장 말줄임으로 표시하기  (0) 2022.09.15
[javascript] 사진 확대해서 띄우기 / onClick 이벤트 활용하여, 사진 클릭 시 사진 확대하기  (0) 2022.09.04
[JavaScript] onClick 시 나타났다 사라지기 / display:none 과 display:block 이용하기  (0) 2022.09.02
[코딩 용어] 갑자기 헷갈리기 시작한 Parameter 와 Argument 의 차이 정리 💭  (0) 2022.08.30
[JavaScript] JavaScript를 통해 오디오 제어기 만들어보기  (0) 2022.08.29

관련글

댓글

티스토리툴바