Google지도가 내 KendoMobile 앱에 표시되지 않습니다.

현재지도를 표시하려고 시도 할 때까지 KendoMobile 웹 앱을 개발하고 있습니다.Google지도가 내 KendoMobile 앱에 표시되지 않습니다.

내가 한 모든 것은지도가 나타나지 않았습니다. 내 문제를 해결하기 위해 kendoUI 의사와 포럼을 찾아보고 this 주제를 찾았습니다.

내 프로젝트에서 사용하기 위해 수정했지만 예제가 완벽하게 작동하더라도 여전히 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

    <title>GoogleMap and KendoUI</title> 
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js"></script> 

    <!-- add the google maps scripts --> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCG4jUolof0jhqQu0j1aNqSWfW_ms-wRKg&sensor=true"></script> 

    <!-- The following style is used to disable the scroller and set the correct height for the map element --> 
    <style> 
     #map .km-content, 
     #map .km-scroll-container, 
     #map #map_canvas { 
      display: -webkit-box; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div data-role="view" data-title="Info" id="info"> 
     <div style="width:100%; text-align: center"> 
      <h1>Using Google Maps<br />in KendoUI application</h1> 
     </div> 
    </div> 

    <!-- hook up to the init event of the view and initialize the google map --> 
    <div data-role="view" data-init="buildMap" id="map" data-title="Map"> 
     <div id="map_canvas" style="width:100%;"></div> 
    </div> 

    <div data-role="layout" data-id="default"> 
     <div data-role="header"> 
      <div data-role="navbar"> 
       <span data-role="view-title"></span> 
      </div> 
     </div> 

     <div data-role="footer"> 
      <div data-role="tabstrip"> 
       <a href="#info" data-icon="info">Info</a> 
       <a href="#map" data-icon="globe">Map</a> 
      </div> 
     </div> 
    </div> 

<script> 
    new kendo.mobile.Application(document.body, {layout: "default"}); 

    //initialize the google map 
    function buildMap(e) { 
     var myOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var mapElement = $("#map_canvas"); 
     var container = e.view.content; 

     var map = new google.maps.Map(mapElement[0], myOptions); 
    } 

</script> 
</body> 
</html>

당신이 날 문제를 찾는 데 도움이 될 수 있습니다 : 여기

내 코드? 뭔가 잊어 버리니? 그것을 고치기 위해해야 할 특별한 것이 있습니까?

출처

2014-03-26 neobagram

찾은 코드 라이브러리는 2 세 - 당신은 지금이 작업을 수행하기 위해 stretched View를 사용할 수 있습니다 http://jsbin.com/yocakibu/1/edit

출처

2014-03-27 04:56:40 Bundyo

당신을 감사합니다! 주제가 오래되었다는 것을 알았지 만 "kendoMobile + maps"라는 단어를 보았을 때 strechedView는 결과에 "명확하게"나타나지 않았습니다. 실제로 많은 결과가 없었습니다. – neobagram

Google지도가 내 KendoMobile 앱에 표시되지 않습니다.

답변

관련 문제