Google Maps not showing on ionic framework

I am a beginner on ionic and was messing up with google maps. I wanted to display Google maps on the screen, but it is not appearing on the screen, although I think that the <div> is receiving the code. HELP!!

Code to <body> 

<body ng-controller="RoadwayControl">

<ion-side-menus>

    <!-- Centre Part -->
  <ion-side-menu-content>
    <ion-header-bar class="bar-dark">
      <button class="button button-icon" ng-click="leftMenuClick()">
        <i class="icon ion-navicon"></i>
      </button>
      <h1 class="title">Roadway Maps</h1>
      <button class="button button-icon" ng-click="rightMenuClick()">
        <i class="icon ion-navicon"></i>
      </button>
    </ion-header-bar>

      <ion-content ng-controller="GoogleMapsControl">
        <div id="map" data-tap-disabled="true"></div>
      </ion-content>

  </ion-side-menu-content>


</ion-side-menus>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAt18I1Nft28M_AaxJjo6kGI-lcP2o5STk&sensor=true"></script>
    <script src="js/app.js"></script>
    <script src="cordova.js"></script>
  </body>

Code to js/app.js

var roadwayApp=angular.module("roadwayNepal",['ionic'])


roadwayApp.factory("RoadwayClass",function(){
  return{
    routes: [],
  };
});


roadwayApp.factory("GoogleMaps",function(){
  return{

  };
});

roadwayApp.controller("RoadwayControl",function($scope,$ionicSideMenuDelegate){
  $scope.allMenus= [
      {"title":"About"},
      {"title":"Settings"},
    ];

  $scope.leftMenuClick=function(){
    $ionicSideMenuDelegate.toggleLeft();
  };


  $scope.activeMenu=null;

  $scope.rightMenuClick=function(){
    if(RoadwayClass.routes.length>0){
      //there are routes
      $ionicSideMenuDelegate.toggleRight();
    }else{
      console.log("empty list");
    }
  }


});


roadwayApp.controller("GoogleMapsControl",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 myDiv=document.getElementById("map");
        var map = new google.maps.Map(myDiv, mapOptions);

        // navigator.geolocation.getCurrentPosition(function(pos) {
        //     map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        //     var myLocation = new google.maps.Marker({
        //         position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
        //         map: map,
        //         title: "My Location"
        //     });
        // });
        $scope.map = map;
    });
});

`

Use http://angular-ui.github.io/angular-google-maps/#!/ for using google maps in your app. You are manipulating DOM from controller which is not recommended.

Also you can check this repo https://github.com/driftyco/ionic-starter-maps.

$ sudo npm install -g ionic cordova $ ionic start myApp maps

You are adding the map on your "sidemenu" and I assume that is it not correct. and I assume that roadwayNepal shall be your ng-app.

Start from a blank project (tab tempalte for exemple)

ionic strat myApp tabs

and add progressivly your map component