スマホアプリにgoogle Mapを表示させる方法

ionicでスマホアプリを制作しgoogle Mapをhomeに表示させる。 手順に沿ってAPI Keyを発行した後、index.htmlの内に

<script>
      var map;
      window.onload　= function() {
        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>

を追加し、 pages/home/home.htmlの内に

  <div id="map">

を追加する。 さらに、pages/home/home.scssを

page-home {
    #map {
        width: 100%;
        height: 100%;
      }
}

とすることで、google mapがmapというidが与えられている場所に表示される。

このときに、index.htmlにおいて上に示すように地図の初期化を行う関数、

function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

をwindow.onloadで実行するように変更すると

window.onload　= function() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

mapというidが割り振られてた後に適切にマップをロードすることができる。