KSI일기장
(JavaScript,Java) GoogleMap(구글지도) 사용1 -웹페이지 지도표출 본문
Java (Spring)
@RestController
public class TestGoogleMapOpen {
@GetMapping("/googleMapTest")
public ModelAndView testGoogleMapView(){
ModelAndView mav = new ModelAndView("/testthyme/googleMapTest");
return mav;
}
}
-->스프링을 사용하고 있어서 스프링으로 구글지도 페이지(html)를 열어줄 코드를 작성했습니다.
Html
<!DOCTYPE html>
<html>
<head>
<title>GoogleMap Test</title>
<script defer src="https://maps.googleapis.com/maps/api/js?key=발급받은 본인 key값&callback=console.debug&callback=Js콜백함수명">
</script>
<script th:src = "@{/js/map.test/index.js}">
</script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 600px;"></div>
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "발급받은 본인 key값", v: "weekly"});</script>
</body>
</html>
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=발급받은 본인 key값&callback=console.debug&callback=Js콜백함수명">
->Script안 발급받은 본인의 key값과 js에서 사용할 콜백 함수명을 적어줍니다.
({"key: "발급받은 본인 key값", v: "weekly"});
body아래에 있는 script안에도 key값을 적어줍니다.
JavaScript
let map;
async function initMap() {
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 37.48144, lng: 126.882652 },
zoom: 18,
});
}
initMap();
--> center : { lat : 위도, lng : 경도}
가산디지털단지역: -위도: 37.48144, -경도: 126.882652
zoom: 확대 배율(정수로 입력)
결과:
'Spring' 카테고리의 다른 글
| (JavaScript,Java) GoogleMap(구글지도)사용3 - 마커클러스터링(마커 여러개) (0) | 2024.02.19 |
|---|---|
| (JavaScript,Java) GoogleMap(구글지도)사용2 -마커(maker)생성 (1) | 2024.02.16 |
| 인텔리제이 무료 라이센스 발급 및 등록 (0) | 2024.01.10 |
| 인텔리제이 GitLab 프로젝트 열기 (0) | 2023.12.18 |
| SpringBoot ModelAndView사용(타임리프에 DB값 넘겨주기) (1) | 2023.11.22 |
'Spring' Related Articles
more
