Display Google Maps on a web page (Spring Boot + Thymeleaf)
Overview
I was learning Spring Boot and wanted to display Google Maps on a web page, so I tried using the Maps JavaScript API. This time, we will use a Thymeleaf fragment to display Google Map on the home screen. If I embedded javascript and css in the html file, it was a moment with the official sample source, but While reading each as a separate file, if I also used fragments, I couldn't figure out where to read them. (In fact, javascript was embedded in html after all.)
- The GCP setting method is omitted.
environment
- macOS Catalina
- Version： 10.15.7
- Eclipse IDE for Enterprise Java Developers.
- Version: 2020-03 (4.15.0) --STS plugin
- Spring Boot 2.2.6
- Java8
- Maven
Reference site
-Google Cloud Platform Official Site --html, css, javascript have official sample sources, so you can use them as they are.
- Web Design Leaves ――I used it as a reference if you had any problems with GCP settings.
Folder structure
Some are omitted for easy viewing.
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
This is the main screen. In the place of <div th: include =" __ $ {contents} __ "> </ div>, I want to include shopMap.html that describes Google Map as a fragment and display it. ..
shopMap.css is loaded here.
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>
···abridgement···
<!--content-->
<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>
This is the html that actually describes Google Map.
Rewrite the part of YOUR_API_KEY to the API key that you got by GCP.
At first, I loaded shopMap.css here, but it didn't display properly.
Probably only the <div th: fragment =" shop_map "> part of the fragment is included in homeLayout.html
Therefore, it may have been meaningless to read css with the \
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">
···abridgement···
<!--Div element to display map-->
<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>
This is the only CSS, but it is essential.
home.css
#map {
height: 400px;
width: 600px;
}
Finally, add processing for the Get method in the controller class.
Add the fragment you want to specify to model and return homeLayout.html.
HomeController.java
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";
}
}
Start Spring Boot and go to http: // localhost: 8080 / shopMap.
- The GCP key limit setting is "HTTP referrer (website)", and only
http: // localhost / *is specified.
It came out safely!
Finally
I tried using the API for the first time in the first place, but the Maps JavaScript API is very easy if you just display the map, and if you customize this, it seems that you can enjoy learning various things. As I mentioned at the beginning, javascript didn't work well when I read it as an external file, and I didn't know where to import it this time. I will try again when I proceed with development and deepen my understanding. At that time, in order to complete this unfinished article, I am sorry to post it once m (._.) M
Recommended Posts