SAPUI5 - Googleマップが表示されない

SAPUI5 - Google지도が表示されていません。コンソールにエラーはありませんが、Googleマップは表示されません。私が試したコードスニペットを見つけてください。ビューでSAPUI5 - Googleマップが表示されない

Index.htmlと

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> 
     <script 
     src="https://maps.googleapis.com/maps/api/js? 
     key=AIzaSyCEf_wLCEciMDw7tgnDGXptl94rdzLhW7Y&libraries=places" 
     type ="text/javascript"> </script> 

     <script id='sap-ui-bootstrap' type='text/javascript' 
     src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
     data-sap-ui-theme='sap_bluecrystal' 
     data-sap-ui-libs='sap.m'></script> 


     <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme --> 

     <script> 
       sap.ui.localResources("googlemaps"); 
       var app = new sap.m.App({initialPage:"idgooglemaps1"}); 
       var page = sap.ui.view({id:"idgooglemaps1", 
       viewName:"googlemaps.googlemaps", 
       type:sap.ui.core.mvc.ViewType.XML}); 
       app.addPage(page); 
       app.placeAt("content"); 
     </script> 


</script> 

     <style> 
     .myMap {     
     height: 100%; 
     width: 100% ; 
     } 
     </style> 
    </head> 
    <body class="sapUiBody" role="application"> 
     <div id="content"></div> 
    </body> 
</html>

、私はキャンバス

<HBox id="map_canvas" fitContainer="true" justifyContent="Center" 
    alignItems="Center" > 

    </HBox>

コントローラが含まれている：イベントではOnAfterRendering私は、マップの初期化を書かれています。（ - あなたのケースで 'map_canvas idgooglemaps1'）

onAfterRendering: function() { 
     if (!this.initialized) { 
     this.initialized = true; 
     this.geocoder = new google.maps.Geocoder(); 
     window.mapOptions = {       
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     };       
     //This is basically for setting the initial position of the map, ie. Setting the coordinates, for the place by default 

     var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
     console.log(map); 
     var infowindow = new google.maps.InfoWindow; 
     var geocoder = new google.maps.Geocoder(); 
     var marker = new google.maps.Marker({ 
     map: map, 
     });

出典

2017-07-21 Chayan Nandi

Googleマップの埋め込みAPIはどうですか？あなたは単純にsapui5 html要素でiframe要素を使用できます。 https://developers.google.com/maps/documentation/embed/ –

あなたはUI5コントロールを作成し、HTML要素に割り当てられたIDが生成されたIDです。したがって、ID 'map_canvas'を持つ要素は存在しません。ただし、UI5コントロール&を取得すると、生成されたIDを取得できます。

var oHBox = this.getView().byId("map_canvas"); 
var map = new google.maps.Map(document.getElementById(oHBox.getId()), mapOptions);

出典

2017-07-21 07:12:32

助けてくれてありがとうございます。私はconsole.log（map）を使って値をチェックしようとしました。オブジェクトには値がありますが、UIにはマップオブジェクトはありません。 UIが空白で、コンソールにエラーが表示されない –

マップ要素がDOM構造内に作成されているかどうか確認できますか –

SAPUI5 - Googleマップが表示されない

答えて

関連する問題