My map didn't appear

Ionic Framework ionic-v3
1

Hello,

i want to make my maps appear in a page after i click on a button in the sidemenu, but it didn’t appear.
this is the steps that i did after creating a ‘sidemenu’ project and implement android and ios platforms:

1-add the Apache Cordova Geolocation API:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

2-add the fellowing line in the “index.html” file

  <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWT_JeAdli-YxLEa4AbmDOGh5G0ShkuMg"></script>

3- add this code in “www/css/style.css” :

.scroll {
    height: 100%;
}
 
#map {
    width: 100%;
    height: 100%;
}

4-add the maps throught the controller of my page:

appControllers.controller('MapCtrl', function ($scope, $ionicLoading) {

 google.maps.event.addDomListener(window, 'load', function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
 
        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
 
        $scope.map = map;
    });
 

});

5-add this code in the page wish i want my maps to appear in:

<ion-view title="Géolocation">
    <!--map and location section-->
    <ion-content id="map-and-location">
        <!--header section-->

    <div id="map" data-tap-disabled="true"></div>

    </ion-content><!--map and location section-->
</ion-view>

after excuting the code my maps didn’t apear, as for the console , it didn’t show any problem.
(Note: i already tried this code in a blank project and the maps appear)
please help me ???