Google Map not showing (Spring, Maven, Thymeleaf, SalesPoint)

Question

im currently working on a Google Map in a Spring project with Thymeleaf. I want to show a map where the User can drag&drop the marker and set the new location. But the map is not showing. If I try it in a normal html file its working fine. Here is the code:

<!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>

Answer 1

First of all, check that <div th:id="mapCanvas"></div> is rendering <div id="mapCanvas"></div> correctly.

If that's the case, are you setting the mapCanvas div's width and height inside stylecreate.css? Empty divs usually have 0 height, so the map won't show up. You must always set a height on the <div> explicitly [1] .

Add the following lines in your CSS:

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

Google Map not showing (Spring, Maven, Thymeleaf, SalesPoint)

Question

1 answers

solution1
0 2016-11-25 15:11:14

Google Map not showing (Spring, Maven, Thymeleaf, SalesPoint)

Question

1 answers

solution1 0 2016-11-25 15:11:14

solution1
0 2016-11-25 15:11:14