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

今日は、スマホアプリの起動、地図の表示を行いました。 ターミナルを用いて、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にあるので、そこを開くと地図の大きさや高さなどを変えられました。 次回は、オープンデータを配列で保持することからです。