GoogleマップをAndroidアプリに表示できません

私は簡単なアプリを持っており、アプリは地図を表示します。私はコルドバと一緒にビルドする。私は自分の位置を得るために成功したが、地図を表示するのに成功していない。GoogleマップをAndroidアプリに表示できません

は、ここに私のコードです：

<script> 
     function onDeviceReady() { 

     var options = { frequency: 3000 }; //THIS I SPECIFY INTERVAL TIME TO SEND POSITIONS 
      var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 3000 }); 
      } 


     function onSuccess(position) //IF SUCCESS 
     { 

     var element = document.getElementById('location_note'); 
     var lat=position.coords.latitude; 
     var lang=position.coords.longitude; 

     var myLatlng = new google.maps.LatLng(lat,lang); 

     var mapOptions={center : new google.maps.LatLng(lat,lang),zoom :4,mapTypeId: google.maps.MapTypeId.ROADMAP}; 

     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=false', function(data) { 
     alamats = data.results[0];//aRRAy to capture address details 
     al=alamats.formatted_address; //variable to capture Address 
     }); 


     element.innerHTML="";//APPEND ADDRESS INFO 
     element.innerHTML = '<center><p><font color="#FFFFFF" face="arial" size="4"> ' + al + '</font><br />' + '</p></center>'; //Success to Display My Address 

      } 

      function onError(error) { 
       alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n'); 
      } 
    </script> 
    <body> 
    <div id="my_location">Address Info here</div> 
    <div id="map_canvas">PETA</div> 
    </body>

私はアドレス情報を得たが、マップが示されていません。

出典

2017-08-03 Def

は、マップにスタイルを追加します。

<style> 
    #map_canvas { 
     height: 100%; 
     width: 100%; 
    } 
</style>

をまた、Googleマップが動作するデバイスを必要としないので、あなたがテストし、ブラウザでデバッグすることができます。ブラウザで

ionic serve -c -s

F12キーを押して、あなたが望むように編集：あなたのアプリケーションディレクトリからこれを実行します。 Consoleタブを監視して、考えられるエラーを確認することを忘れないでください（投稿したコードにあるように、my_location - > location_note）。 testing docsをご覧ください。

いずれにしても、私はアプリを最小限の表現に単純化し、それを機能させ、間違いを避ける（ジオロケーションコード、ハードコードセンターロケーションなどを削除する）ようにします。

例：https://plnkr.co/edit/gEm60LZwxS2tggceBKOf?p=previewとgoogle maps hello world exampleとしてください。

出典

2017-08-07 20:12:48

GoogleマップをAndroidアプリに表示できません

答えて

関連する問題