2016-08-24 10 views
0

ここは私のview.jspです。これはGoogleの例です。 8080:私はローカルホスト上のLiferay 7のローカルインスタンスを実行しているLiferay 7 MVCポートレットでGoogleマップを表示できません

<%@ include file="/init.jsp" %> 

    <p> 
     <b><liferay-ui:message key="mapsportlet_mapsPortletmvcportlet.caption"/></b> 
    </p> 

<DOCTYPE! html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 20%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 20%; 
     } 
    </style> 
    </head> 
    <body> 
    <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: 8 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeekwNluL4ssJ3QAFGPSkFHYYQvZoNbVM&callback=initMap" 
    async defer></script> 
    </body> 
</html> 

:私はちょうどこれがそれと前方に移動する前に表示するために取得したいです。 APIキーが正しく設定されていないため、JavaScriptが起動していると思います。javascriptコンソールで、拒否されていることがわかりました。 APIキーを修正した後、ブラウザのコンソールにエラーは表示されなくなりましたが、ポートレットにマップの表示が表示されません。

view.jspに問題がありますか?それとも別の方法がありますか?

+0

ページDOMの検査では、 "地図" divはコンテンツとして何を表示するのですか? –

+0

私は以下のOlafs anwerを読んで、あなたのマークアップを改訂し、彼に信用を与えるためにOlafs anwerを受け入れることを勧めます。すべてのタグはあなたの質問に関連していない可能性が高いです。ポートレット・アーキテクチャーの基本概念を認識していないだけです。 –

答えて

1

この質問に「liferay」というタグが付いているので、ポートレットのビューとして投稿したJSPを使用していると仮定しています。このマークアップはポータルによって追加されるため、ポートレットには<html>,<head>または<body>が含まれてはなりません。

ID:map id:ページに同じポートレットを2回追加すると、重複するHTML要素IDで終わるだけでなく、これは機能しません。これが問題になる場合は、<portlet:namespace/>を使用して識別子を一意にします。他のポートレットがすでにこのIDを追加している場合にも試してみてください。このIDが現在どこで使用されているかによって、すでに動作している可能性があります。

また、余分な<html><head>セクションに含まれている場合、<style>が無視されるかどうかはわかりません。適切な高さで明示的にあなたの<div>をスタイリングしてみてください。

関連する問題