My map didn't appear


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

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

  <script src=""></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);
        $ = 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-->

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 ???