谷歌地图未显示（Spring、Maven、Thymeleaf、SalesPoint）答案

【问题标题】：Google Map not showing (Spring, Maven, Thymeleaf, SalesPoint)谷歌地图未显示（Spring、Maven、Thymeleaf、SalesPoint）
【发布时间】：2016-11-22 16:06:41
【问题描述】：

我目前正在与 Thymeleaf 一起在 Spring 项目中使用 Google 地图。我想显示一张地图，用户可以在其中拖放标记并设置新位置。但是地图没有显示。如果我在普通的 html 文件中尝试它，它工作正常。代码如下：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/../resources/css/stylecreate.css" />
    <title>Festival erstellen</title>


    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script th:inline="javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDuC0oHTI_mwfwW2HBiClpEuvSUKO7R8mg&amp;sensor=false"></script>

    <script th:inline="javascript">
        var geocoder = new google.maps.Geocoder();

        function geocodePosition(pos) {
         geocoder.geocode({
         latLng: pos
         }, function(responses) {
            if (responses and responses.length > 0) {
            updateMarkerAddress(responses[0].formatted_address);
         } else {
         updateMarkerAddress('Cannot determine address at this location.');
         }
        });
        }

        function updateMarkerStatus(str) {
            document.getElementById('markerStatus').innerHTML = str;
            }

        function updateMarkerPosition(latLng) {
            document.getElementById('info').innerHTML = [
                 latLng.lat(),
                 latLng.lng()
                 ].join(', ');
            }

        function updateMarkerAddress(str) {
            document.getElementById('address').innerHTML = str;
            }

        function initialize() {
            var latLng = new google.maps.LatLng(-34.397, 150.644);
            var map = new google.maps.Map(document.getElementById('mapCanvas'), {
             zoom: 8,
             center: latLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
             position: latLng,
             title: 'Point A',
              map: map,
                 draggable: true
             });

        // Update current position info.

        updateMarkerPosition(latLng);
         geocodePosition(latLng);

        // Add dragging event listeners.

        google.maps.event.addListener(marker, 'dragstart', function() {
          updateMarkerAddress('Dragging...');
          });

        google.maps.event.addListener(marker, 'drag', function() {
         updateMarkerStatus('Dragging...');
         updateMarkerPosition(marker.getPosition());
         });

        google.maps.event.addListener(marker, 'dragend', function() {
         updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
        });
        }

        // Onload handler to fire off the app.

                google.maps.event.addDomListener(window, 'load', initialize);
                 </script>


    </head>
<body>

    <div th:id="mapCanvas"></div>
  <div th:id="infoPanel">
<b>Marker status:</b>
<div th:id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div th:id="info"></div>
<b>Closest matching address:</b>
<div th:id="address"></div>
  </div>
</body>
</html>

【问题讨论】：

如果您使用的是 chrome，控制台中是否有任何错误？
是的，它显示“SensorNotRequired”。我会在没有传感器的情况下快速尝试。谢谢！
这是一个警告。这与这个问题无关。
你可以查看页面源代码并复制粘贴到这里吗？
现在由于此行中的意外标识符（27）显示了一个未计算的语法错误：if (responses andresponses.length > 0) {

标签： javascript html spring google-maps thymeleaf

【解决方案1】：

首先，检查<div th:id="mapCanvas"></div> 是否正确呈现<div id="mapCanvas"></div>。

如果是这样，您是否在 stylecreate.css 中设置mapCanvas div 的宽度和高度？空 div 的高度通常为 0，因此地图不会显示。您必须始终在<div> 上明确设置[1] 的高度。

在您的 CSS 中添加以下行：

#mapCanvas {
   width: 200px;        
   height: 200px;
}

【讨论】：