スマホアプリに地図を表示する

今日は、スマホアプリの起動、地図の表示を行いました。 ターミナルを用いて、ionicのインストール、ionicのプロジェクト作成をして、スマホアプリの起動を行ったのですが、


$ ionic start smartphoneApp tabs

のところで、エラーが起きてしまいました。 また、ターミナルからVisual Studio Code を起動する方法を学びました。


<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=YOUR_API_KEY&callback=initMap" async defer></script>

このコードをheadの中に入れると、アプリに地図を表示することができました。地図にマーカーをプロットすることも同様の方法で行いました。

 <link href="build/main.css" rel="stylesheet">

このコードから、stylesheetはmain.cssにあるので、そこを開くと地図の大きさや高さなどを変えられました。 次回は、オープンデータを配列で保持することからです。