Google 지도를 웹페이지에 표시(Spring Boot + Thymeleaf)
개요
Spring Boot를 배우고 Google Map을 웹 페이지에 표시하고 싶다는 점에서 Maps JavaScript API를 사용해 보았습니다.
이번에는 Thymeleaf 조각을 사용하여 홈 화면에 Google Map을 표시합니다.
html 파일에 javascript, css도 포함시켜 버리면 공식 샘플 소스로 순식간이었습니다만,
각각 별도의 파일로 읽으면서 조각도 사용하면 어디에서 읽어야 할지 모르겠습니다. (라든지 javascript는 결국 html 임베딩했습니다.)
※GCP의 설정 방법은 생략하고 있습니다.
환경
참고 사이트
Google Cloud Platform 공식 사이트
Web Design Leaves
폴더 구성
보기 쉽게 하기 위해 몇 가지 할애하고 실고 있습니다.
src
└── main/
├── java/
│ └── com/
│ └── example/
│ └── demo/
│ ├── SampleApplication.java
│ ├── WebConfig.java
│ └── login/
│ └── controller/
│ └── HomeController.java
└── resources/
├── application.properties
├── static/
│ └── css/
│ └── home.css
└── templates/
└── login/
├── homeLayout.html
└── shopMap.html
메인 화면입니다. 이 중 <div th:include="__${contents}__"></div>의 부분에 Google Map을 기술하고 있는 shopMap.html를 단편으로 include하여 표시하고 싶습니다.shopMap.css는 여기에서 읽습니다.
homeLayout.html<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8"></meta>
<link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"></link>
<script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<link th:href="@{/css/home.css}" rel="stylesheet"></link>
<title>Home</title>
</head>
<body>
・・・省略・・・
<!-- コンテンツ-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-offset-2 main">
<div th:include="__${contents}__"></div>
</div>
</div>
</div>
</body>
</html>
이것은 Google Map을 실제로 설명하는 HTML입니다.YOUR_API_KEY의 위치를 GCP에서 얻은 API 키로 다시 씁니다.
처음에 여기에서 shopMap.css를 읽었지만 잘 표시되지 않았습니다.
아마 조각에 <div th:fragment="shop_map"> 의 부분만 homeLayout.html 에 포함된다
이 때문에 여기의 태그로 css를 읽어도 무의미했을지도 모릅니다.
shopMap.html<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
</head>
<body>
<div th:fragment="shop_map">
・・・省略・・・
<!-- 地図を表示する div 要素 -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 10
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" defer></script>
</div>
</body>
</html>
CSS는 이것뿐이지만 필수라는 것.
home.css#map {
height: 400px;
width: 600px;
}
마지막으로 컨트롤러 클래스에서 Get 메서드 처리를 추가합니다.
model에 지정하고 싶은 단편을 추가해, homeLayout.html 를 돌려줍니다.
HomeController.javapackage com.example.demo.login.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/shopMap")
public String getShopMap(Model model) {
model.addAttribute("contents", "login/shopMap :: shop_map");
return "login/homeLayout";
}
}
Spring Boot를 시작하고 http://localhost:8080/shopMap에 액세스합니다.
※GCP의 키 제한의 설정은 「HTTP 리퍼러(웹사이트)」로, http://localhost/* 만 지정하고 있습니다.
안전하게 나왔습니다!
마지막으로
원래 API를 처음 사용해 보았습니다만, Maps JavaScript API는 지도의 표시만이라면 매우 간단하고, 이것을 커스터마이즈 해 가면 즐기면서 여러가지 배울 수 있을 것 같습니다.
처음에 설명한 대로, javascript는 결국 외부 파일로서 읽어들여 잘 움직이지 않고, 어디에서 import 해야 할지 이번은 몰랐습니다.
개발을 진행해 좀 더 이해가 깊어지면 또 도전해 보려고 생각합니다.
그 때 이 미완성의 기사를 완성시키기 위해, 불행히도 일단 투고하겠습니다m(._.)m
Reference
이 문제에 관하여(Google 지도를 웹페이지에 표시(Spring Boot + Thymeleaf)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uqjson/items/f4d99e16a9269dbbffbd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
src
└── main/
├── java/
│ └── com/
│ └── example/
│ └── demo/
│ ├── SampleApplication.java
│ ├── WebConfig.java
│ └── login/
│ └── controller/
│ └── HomeController.java
└── resources/
├── application.properties
├── static/
│ └── css/
│ └── home.css
└── templates/
└── login/
├── homeLayout.html
└── shopMap.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8"></meta>
<link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"></link>
<script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<link th:href="@{/css/home.css}" rel="stylesheet"></link>
<title>Home</title>
</head>
<body>
・・・省略・・・
<!-- コンテンツ-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-offset-2 main">
<div th:include="__${contents}__"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
</head>
<body>
<div th:fragment="shop_map">
・・・省略・・・
<!-- 地図を表示する div 要素 -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 10
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" defer></script>
</div>
</body>
</html>
#map {
height: 400px;
width: 600px;
}
package com.example.demo.login.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/shopMap")
public String getShopMap(Model model) {
model.addAttribute("contents", "login/shopMap :: shop_map");
return "login/homeLayout";
}
}
원래 API를 처음 사용해 보았습니다만, Maps JavaScript API는 지도의 표시만이라면 매우 간단하고, 이것을 커스터마이즈 해 가면 즐기면서 여러가지 배울 수 있을 것 같습니다.
처음에 설명한 대로, javascript는 결국 외부 파일로서 읽어들여 잘 움직이지 않고, 어디에서 import 해야 할지 이번은 몰랐습니다.
개발을 진행해 좀 더 이해가 깊어지면 또 도전해 보려고 생각합니다.
그 때 이 미완성의 기사를 완성시키기 위해, 불행히도 일단 투고하겠습니다m(._.)m
Reference
이 문제에 관하여(Google 지도를 웹페이지에 표시(Spring Boot + Thymeleaf)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uqjson/items/f4d99e16a9269dbbffbd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
