Google Mapが表示されません（Spring、Maven、Thymeleaf、SalesPoint）

現在、Thymeleafを使用したSpringプロジェクトでGoogle Mapで作業しています。私はユーザーが&をドラッグしてドラッグして新しい場所を設定できる地図を表示したいと思います。しかし、地図は表示されていません。通常のhtmlファイルで試してみるとうまく動作します。ここでコードは次のとおりです。すべてのGoogle Mapが表示されません（Spring、Maven、Thymeleaf、SalesPoint）

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

出典

2016-11-22 Julian Hinrichs

をあなたは、クロムを使用している場合は、すべてのエラーをコンソールに？ –

はい、 "SensorNotRequired"と表示されます。私はすぐにセンサーなしでそれを試してみます。ありがとうございました！ –

これは警告です。これはこの問題とは関係ありません。 –

まず、<div th:id="mapCanvas"></div>が正しく<div id="mapCanvas"></div>をレンダリングしていることを確認してください。

その場合、mapCanvas divの幅と高さをstylecreate.css内に設定していますか？空のdivは通常高さが0なので、マップは表示されません。 <div>には常に[1]の高さを設定する必要があります。

はあなたのCSSに以下の行を追加します。

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

出典

2016-11-25 15:11:14 jbern

Google Mapが表示されません（Spring、Maven、Thymeleaf、SalesPoint）

答えて

関連する問題