Google/Kakao Map Api 사용방법

DB구조

GoogleMap.VO

package egovframework.sample.vo;


import java.util.Date;

import lombok.Data;

@Data
public class GoogleMap {
	private String addUuid;
	private String company;
	private String region;
	private String roadFullAddr; //도로명주소전체
	private String addrDetail; //고객입력 상세주소
	private String phone ; 
	private String fax;
	private int place; //국내, 해외
	private Date regiDate;
	private Date editDate;
	private double latitude; //위도
	private double longitude; //경도
	
	
	
	public GoogleMap() {}



	public GoogleMap(String addUuid, double latitude, double longitude) {
		super();
		this.addUuid = addUuid;
		this.latitude = latitude;
		this.longitude = longitude;
	}


	public GoogleMap(String addUuid, String company, String region, String roadFullAddr, String addrDetail, String phone, String fax,
			Date regiDate, Date editDate, int place) {
		super();
		this.addUuid = addUuid;
		this.company = company;
		this.region = region;
		this.roadFullAddr = roadFullAddr;
		this.addrDetail = addrDetail;
		this.phone = phone;
		this.fax = fax;
		this.regiDate = regiDate;
		this.editDate = editDate;
		this.place = place;
	}
	



}

 

GoogleMap.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="GoogleMap">
	
	<insert id="saveAddress" parameterType="egovframework.sample.vo.GoogleMap">
	<selectKey resultType="String" keyProperty="addUuid" order="BEFORE">
	select FN_GET_UUID('ADD') as addUuid
	</selectKey>
	
	INSERT INTO address
	VALUES(#{addUuid},#{company},#{region},#{roadFullAddr},#{addrDetail},#{phone},#{fax},NOW(),NOW(),#{place})
	</insert>

	<select id="selectAll" resultType="egovframework.sample.vo.GoogleMap">
	
	SELECT
			a.addUuid, company, region, roadFullAddr, addrDetail, phone, fax, place, x.latitude, x.longitude
	FROM 	address a left outer join xy_address x on a.addUuid = x.addUuid
	WHERE	place = 0
	ORDER BY a.add_regi_date asc
	</select>	
	
	<select id="selectAllEng" resultType="egovframework.sample.vo.GoogleMap">
	
	SELECT
			a.addUuid, company, region, roadFullAddr, addrDetail, phone, fax, place, x.latitude, x.longitude
	FROM 	address a left outer join xy_address x on a.addUuid = x.addUuid
	WHERE	place = 1
	ORDER BY a.add_regi_date asc
	</select>	

	<insert id="saveAddress_xy" parameterType="egovframework.sample.vo.GoogleMap">
	INSERT INTO xy_address
	VALUES(#{addUuid},#{latitude},#{longitude})
	</insert>


</mapper>

Sql query

create table address(
addUuid VARCHAR(100) not null,
company VARCHAR(200),
region VARCHAR(200),
roadFullAddr VARCHAR(200),
addrDetail VARCHAR(200),
phone VARCHAR(200),
fax VARCHAR(200),
add_regi_date	DATETIME,
add_edit_date	DATETIME,
place int(1),
primary key (addUuid)
);

select * from address;
select * from xy_address;

create table xy_address(
addUuid VARCHAR(100) not null,
latitude double,
longitude double,
primary key (addUuid)
);

MapImpl

@Service("GoogleMapService")
public class GoogleMapImpl implements GoogleMapService {

	@Resource(name = "CommonDAO")
	private CommonDAO commonDAO;

	@Override
	public void save(GoogleMap googleMap) {
		
		GoogleMap newAddress = new GoogleMap(null, googleMap.getCompany(), googleMap.getRegion(), googleMap.getRoadFullAddr(), googleMap.getAddrDetail(), googleMap.getPhone(), googleMap.getFax(),
				null, null, googleMap.getPlace());

		
		commonDAO.insert("GoogleMap.saveAddress", newAddress); 
		
		GoogleMap xy = new GoogleMap(newAddress.getAddUuid(), googleMap.getLatitude(), googleMap.getLongitude());
		
			
		System.out.println("정보 출력 : "+ newAddress);
		System.out.println("정보 출력2 : "+ xy);
		
		commonDAO.insert("GoogleMap.saveAddress_xy", xy); 

		
	}

	@Override
	public List<GoogleMap> selectAll() {
		return commonDAO.selectList("GoogleMap.selectAll");

	}

	@Override
	public List<GoogleMap> selectAllEng() {
		return commonDAO.selectList("GoogleMap.selectAllEng");
	}


	
}

MapService

public interface GoogleMapService {
	
	void save(GoogleMap googleMap);
	List<GoogleMap> selectAll();
	List<GoogleMap> selectAllEng();
    
}

MapController

@Controller
public class MapController {
	
	@Resource(name = "GoogleMapService")
	private GoogleMapService googleMapService;
	

	@GetMapping("/address") //주소입력, 저장으로 이동
	    public String addressWrite(Model model, GoogleMap gmap) { 
		
		return "sample/address";
        }
	
	@GetMapping("/addressEng") //해외 주소입력, 저장으로 이동
    public String addressEngWrite(Model model, GoogleMap gmap) { 
	
	return "sample/addressEng";
    }

	
	@GetMapping("/addressList") //지도 출력
    public String viewMap(Model model, GoogleMap gmap) { 
	
	List<GoogleMap> list = googleMapService.selectAll();
	
	model.addAttribute("list", list);
	
	return "sample/addressList";
    }
	
	@GetMapping("/addressEngList") //지도 출력
    public String viewEngMap(Model model, GoogleMap gmap) { 
	
	List<GoogleMap> list = googleMapService.selectAllEng();
	
	model.addAttribute("list", list);
	
	return "sample/addressEngList";
    }
}

MapRestController

@RestController
public class MapRestController {
	
	@Resource(name = "GoogleMapService")
	private GoogleMapService googleMapService;
	

	@PostMapping("/addressSave") //입력폼에서 받은 정보 저장
    public HashMap<String, Object> address(Model model, @RequestBody GoogleMap googleMap) throws IOException { 
		
		System.out.println("위도경도"+googleMap.getLatitude()+googleMap.getLongitude());
		
		googleMapService.save(googleMap);
		
		
		HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("result",googleMap);
        
		return map;
	}
}

주소입력 address.jsp (카카오 주소 api 활용)

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form"   uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui"     uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <!--  카카오 주소 api-->
   <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<title>국내 사업장</title>

<style>
	body{font-family: 'Noto Sans KR', sans-serif;}
	h2{text-align: left;}

	a:link {color: black;}
    a:visited {color: black;}
    a:hover {color: black; text-decoration: none;}
    a:active {color: black;}
    
</style>
</head>

<body>
<br><br>
<div class="container">
	<h2>사업장 정보</h2>
	<div class="row justify-content-md-center">
	
		<form:form name="mapForm" id="mapForm">
			<table class="table table-bordered">
			
				<tr><td>사업장명</td><td><input type="text"  style="width:500px;" id="company"  name="company" /></td></tr>
				<tr><td>지명</td><td><input type="text"  style="width:500px;" id="region"  name="region" /></td></tr>
				<tr><td>주소</td><td><input type="text"  style="width:500px;" id="roadFullAddr"  name="roadFullAddr" /></td></tr>
				<tr><td>상세주소</td><td><input type="text"  style="width:500px;" id="addrDetail"  name="addrDetail" /></td></tr>
				<tr><td>전화번호</td><td><input type="text"  style="width:500px;" id="phone"  name="phone" /></td></tr>
				<tr><td>팩스</td><td><input type="text"  style="width:500px;" id="fax"  name="fax" /></td></tr>
			
			</table>
				<br>
			<input type="button" value="주소 저장"  onclick="validation()">
			<input type="button" value="국내 사업장" onclick="location.href='../addressList'">
			<input type="button" value="해외 사업장" onclick="location.href='../addressEngList'">
		
		</form:form>
	</div>

</div>



<script>

	function validation() {
		
	    var company = document.forms["mapForm"]["company"].value;
	    var region = document.forms["mapForm"]["region"].value;
	    var roadFullAddr = document.forms["mapForm"]["roadFullAddr"].value;
	    var addrDetail = document.forms["mapForm"]["addrDetail"].value;
	    var phone = document.forms["mapForm"]["phone"].value;
	    var fax = document.forms["mapForm"]["fax"].value;
		
	
		    if (company == null || company == "") {
		       
		      alert('사업장명을 입력해주세요');
		     
		
		        return false;
		
		    } else if (region == null || region == "") {
		    	
		    	 alert('지명을 입력해주세요');
		       
		
		        return false;
		        
		    } else if (roadFullAddr == null || roadFullAddr == "") {
		    	
		    	 alert('주소를 입력해주세요');
		      
		
		        return false;
		        
			} else if (phone == null || phone == "") {
			    	
				 alert('전화번호를 입력해주세요');
			      
			    return false;
	  
		
		    } else{
		    	
		    	kakaoMap(); //모두 통과하면 실행
		    }
	
	}


	window.onload = function(){
	    document.getElementById("roadFullAddr").addEventListener("click", function(){ //주소입력칸을 클릭하면

	        new daum.Postcode({
	            oncomplete: function(data) { //선택시 입력값 세팅
	                document.getElementById("roadFullAddr").value = data.address; // 주소 넣기
	                document.querySelector("input[name=roadFullAddr]").focus(); //상세입력 포커싱
	            }
	        }).open();
	    });
	}
	
	////////////////////////////////////////////////////////주소 입력만 받는 구간
	

	function kakaoMap(){
		
		let company = document.forms["mapForm"]["company"].value;
		let region = document.forms["mapForm"]["region"].value;
		
		let roadFullAddr = document.forms["mapForm"]["roadFullAddr"].value;
		let addrDetail = document.forms["mapForm"]["addrDetail"].value;
		let phone = document.forms["mapForm"]["phone"].value;
		let fax = document.forms["mapForm"]["fax"].value;
		let place=0; //국내사업장은 0번 지정
		

		   $.ajax({           
			   url:'https://dapi.kakao.com/v2/local/search/address.json?query='+encodeURIComponent(roadFullAddr),           
				   type:'GET',           
				   headers: {'Authorization' : 'KakaoAK 키주소'},   
				   success:function(data){       
					   
					   console.log(data.documents[0]);   
					   console.log(data.documents[0]['x']); 
					   console.log(data.documents[0]['y']); 
					   
					   /////////////////////////////////////카카오에서 추출한 위도경도 서버전송, 테이블 저장
					   let latitude  = data.documents[0]['y']; 
					   let longitude = data.documents[0]['x']; 
					   
					   var data = { 'latitude' :latitude,
							   		'longitude':longitude,
							   		'roadFullAddr' :roadFullAddr,
							   		'addrDetail': addrDetail,
							   		'place' :place,
							   		'phone' :phone,
							   		'fax' : fax,
							   		'company' : company,
							   		'region' : region
					   };
					   
						   $.ajax({
					             url: "/addressSave",  
					             type: "POST",
					             data: JSON.stringify(data),
					             dataType: "JSON",
					             contentType: "application/json",
					             accept: "application/json",
					             success: function(result) {          
					            	 console.log("전송/저장 성공");
					            	 alert('저장이 완료되었습니다.');
					            	 
					             },
					             error: function(result) {
					                 console.log(result.responseText); //responseText의 에러메세지 확인
					             }
					         });
						  
						   },   
						   
					   error : function(e){       
						   console.log(e);   
						}
				});
	
	}

</script>

</body>
</html>

국내맵 리스트 addressList.jsp (구글 지도 api)

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form"   uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui"     uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<title>Google Map</title>

<style>
	body{font-family: 'Noto Sans KR', sans-serif;}
	h2{text-align: left;}

	a:link {color: black;}
    a:visited {color: black;}
    a:hover {color: black; text-decoration: none;}
    a:active {color: black;}
    
</style>
</head>

<body>
<br><br>
<div class="container">
	<h2>국내 사업장</h2>
	<div class="row justify-content-md-center">
	<table>
		<c:forEach var="list" items="${list}">
			<tr>
				<td><span style="font-size:16pt; color:gray;">${list.company} | </span><span style="font-size:16pt; color:red;">${list.region}</span></td>
			</tr>
			<tr>
				<td><br>${list.roadFullAddr}</td>
			</tr>
			<tr>
				<td>전화번호 ${list.phone} | 팩스 ${list.fax}</td>
			</tr>
			<tr>
				<td><br>
					<div name="mapDivs" data-lat="${list.latitude}" data-lng="${list.longitude}" style="width: 750px;height: 400px;"></div> 
					<br>
					<hr>
					<br>
				</td>	
			</tr>
		</c:forEach>
	</table>
			
			
</div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=키주소&callback=myMap"></script>
<script>
function myMap() {
	var mapIds = document.getElementsByName('mapDivs'); //같은 이름으로 순서대로 객체가 들어가있음
	if (!mapIds || mapIds.length < 1) return;
	
    for (var i = 0; i < mapIds.length; i++) {
        var mapDiv = mapIds[i]; //순서대로 객체 꺼낸다
        
        if (!mapDiv) continue;

        var lat = Number(mapDiv.dataset.lat); //선택된 첫번째 div객체안의 dataset.lat에 있는 고유 값 꺼냄
        var lng = Number(mapDiv.dataset.lng);

        var map = new google.maps.Map(
            mapDiv, { //첫번째 div 객체를 선택한다
            zoom: 18,
            disableDefaultUI:true,
            zoomControl: true,
            center: { lat: lat, lng: lng }
        });
        
        var marker = new google.maps.Marker({ //마커추가
            position: { lat: lat, lng: lng },
            map: map
          });
    }
}
</script>


</body>
</html>

해외주소 입력 (Google Geocoding api 활용)

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form"   uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui"     uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<title>해외 사업장</title>

<style>
	body{font-family: 'Noto Sans KR', sans-serif;}
	h2{text-align: left;}

	a:link {color: black;}
    a:visited {color: black;}
    a:hover {color: black; text-decoration: none;}
    a:active {color: black;}
    
</style>
</head>

<body>
<br><br>
<div class="container">
	<h2>해외 사업장 정보</h2>
	<div class="row justify-content-md-center">
	
		<form:form name="mapForm" id="mapForm">
			<table class="table table-bordered">
			
				<tr><td>사업장명</td><td><input type="text"  style="width:500px;" id="company"  name="company" /></td></tr>
				<tr><td>지명</td><td><input type="text"  style="width:500px;" id="region"  name="region" /></td></tr>
				<tr><td>주소</td><td><input type="text"  style="width:500px;" id="roadFullAddr"  name="roadFullAddr" /></td></tr>
				<tr><td>전화번호</td><td><input type="text"  style="width:500px;" id="phone"  name="phone" /></td></tr>
			
			</table>
				<br>
			<input type="button" value="주소 저장"  onclick="validation()">
			<input type="button" value="국내 사업장" onclick="location.href='../addressList'">
			<input type="button" value="해외 사업장" onclick="location.href='../addressEngList'">
		
		</form:form>
	</div>

</div>

</body>


<script>

	function validation() {
		
	    var company = document.forms["mapForm"]["company"].value;
	    var region = document.forms["mapForm"]["region"].value;
	    var roadFullAddr = document.forms["mapForm"]["roadFullAddr"].value;
	    var phone = document.forms["mapForm"]["phone"].value;
		
	
		    if (company == null || company == "") {
		       
		      alert('사업장명을 입력해주세요');
		     
		
		        return false;
		
		    } else if (region == null || region == "") {
		    	
		    	 alert('지명을 입력해주세요');
		       
		
		        return false;
		        
		    } else if (roadFullAddr == null || roadFullAddr == "") {
		    	
		    	 alert('주소를 입력해주세요');
		      
		
		        return false;
	  
		
		    } else{
		    	
		    	SaveAddress(); //모두 통과하면 실행
		    }
	
	}



 	function SaveAddress(){
		
		let company = document.forms["mapForm"]["company"].value;
		let region = document.forms["mapForm"]["region"].value;	
		let roadFullAddr = document.forms["mapForm"]["roadFullAddr"].value;
		let phone = document.forms["mapForm"]["phone"].value;
		let place = 1; //해외사업장은 1번 지정
		
		let latitude;
		let longitude;
		
		
		if(roadFullAddr!=null){ //null 아니면 실행

		   $.ajax({
	           url: "https://maps.googleapis.com/maps/api/geocode/json?address="+encodeURIComponent(roadFullAddr)+"&key=AIzaSyC_sw5hTo9uHRHJ5fZdSacyRIk0E-uIMO4",  
	           type: "GET",
	           success: function(results) {          
	          	 console.log(results);
	          	 console.log(results.results[0].geometry.location);
	          	 
	             latitude= results.results[0].geometry.location['lat'];
		   		 longitude= results.results[0].geometry.location['lng'];
		   		 
		   		 var data = { 'latitude' : latitude,
					   		'longitude': longitude,
					   		'roadFullAddr' : roadFullAddr,
					   		'place' : place,
					   		'phone' : phone,
					   		'company' : company,
					   		'region' : region
			   				};
		   		   		 
		   		
			 		   		$.ajax({
					             url: "/addressSave",  
					             type: "POST",
					             data: JSON.stringify(data),
					             dataType: "JSON",
					             contentType: "application/json",
					             accept: "application/json",
					             success: function(result) {    
	
					            	 console.log("전송/저장 성공");
					            	 alert('저장이 완료되었습니다.');
					            	 
					             },
					             error: function(result) {
					                 console.log(result.responseText); //responseText의 에러메세지 확인
					             }
					         }); 
					  
					   },   
					   
				   error : function(e){       
					   console.log(e);   
					}
				}); 

		}
 	}

</script>

</body>
</html>

해외 맵 리스트 addressEngList.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form"   uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui"     uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<title>Google Map_abroad</title>

<style>
	body{font-family: 'Noto Sans KR', sans-serif;}
	h2{text-align: left;}

	a:link {color: black;}
    a:visited {color: black;}
    a:hover {color: black; text-decoration: none;}
    a:active {color: black;}
    
</style>
</head>

<body>
<br><br>
<div class="container">
	<h2>해외 사업장</h2>
	<div class="row justify-content-md-center">
	<table>
		<c:forEach var="list" items="${list}">
			<tr>
				<td><span style="font-size:16pt; color:gray;">${list.company} | </span><span style="font-size:16pt; color:red;">${list.region}</span></td>
			</tr>
			<tr>
				<td><br>${list.roadFullAddr}</td>
			</tr>
			
			<c:if test="${list.phone==''}"></c:if>
			<c:if test="${list.phone!=''}">
				<tr>
					<td>전화번호 ${list.phone}</td>
				</tr>
			</c:if>
			
			<tr>
				<td><br>
					<div name="mapDivs" data-lat="${list.latitude}" data-lng="${list.longitude}" style="width: 750px;height: 400px;"></div> 
					<br>
					<hr>
					<br>
				</td>	
			</tr>
		</c:forEach>
	</table>
			
			
</div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_sw5hTo9uHRHJ5fZdSacyRIk0E-uIMO4&callback=myMap"></script>
<script>
function myMap() {
	var mapIds = document.getElementsByName('mapDivs'); //같은 이름으로 순서대로 객체가 들어가있음
	if (!mapIds || mapIds.length < 1) return;
	
    for (var i = 0; i < mapIds.length; i++) {
        var mapDiv = mapIds[i]; //순서대로 객체 꺼낸다
        
        if (!mapDiv) continue;

        var lat = Number(mapDiv.dataset.lat); //선택된 첫번째 div객체안의 dataset.lat에 있는 고유 값 꺼냄
        var lng = Number(mapDiv.dataset.lng);

        var map = new google.maps.Map(
            mapDiv, { //첫번째 div 객체를 선택한다
            zoom: 18,
            disableDefaultUI:true,
            zoomControl: true,
            center: { lat: lat, lng: lng }
        });
        
        var marker = new google.maps.Marker({ //마커추가
            position: { lat: lat, lng: lng },
            map: map
          });
    }
}
</script>


</body>
</html>

Kakao Map Api / kakaoList.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form"   uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui"     uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<title>Kakao Map</title>

<style>
	body{font-family: 'Noto Sans KR', sans-serif;}
	h2{text-align: left;}

	a:link {color: black;}
    a:visited {color: black;}
    a:hover {color: black; text-decoration: none;}
    a:active {color: black;}
    
</style>
</head>

<body>
<br><br>
<div class="container">
	<h2>국내 사업장</h2>
	<div class="row justify-content-md-center">
	<table>
		<c:forEach var="list" items="${list}">
			<tr>
				<td><span style="font-size:16pt; color:gray;">${list.company} | </span><span style="font-size:16pt; color:red;">${list.region}</span></td>
			</tr>
			<tr>
				<td><br>${list.roadFullAddr}</td>
			</tr>
			<tr>
				<td>전화번호 ${list.phone} | 팩스 ${list.fax}</td>
			</tr>
			<tr>
				<td><br>
					<div name="mapDivs" data-lat="${list.latitude}" data-lng="${list.longitude}" style="width: 750px;height: 400px;"></div> 
					<br>
					<hr>
					<br>
				</td>	
			</tr>
		</c:forEach>
	</table>
			
			
</div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오키&libraries=services,clusterer,drawing"></script>

<script>

	let position = [];
	
	var mapIds = document.getElementsByName('mapDivs'); //같은 이름으로 순서대로 객체가 들어가있음


    for (var i = 0; i < mapIds.length; i++) {
        var mapDiv = mapIds[i]; //순서대로 객체 꺼낸다

        var lat = Number(mapDiv.dataset.lat); //선택된 첫번째 div객체안의 dataset.lat에 있는 고유 값 꺼냄
        var lng = Number(mapDiv.dataset.lng);
                    
		var options = {
			center: new kakao.maps.LatLng(lat, lng),
			level: 3
		};

		var map = new kakao.maps.Map(mapDiv, options);
		
		position = new kakao.maps.LatLng(lat, lng);

	
	 	var marker = new kakao.maps.Marker({ //맵에 마킹
             map: map,
             position: position
         });

	 	
        

    }

</script>


</body>
</html>