Map not showing up

hi,

i have a map element within my app and it will not show up. All of the nearby places are present but no map is displaying.
I am using the following:
cordovaGeolocation, uiGmapGoogleMapApi, uiGmapIsReady, ngGPlacesAPI

the html code is :

             <ion-view view-title="Nearby Health Services">
            <ion-content class="padding">
          <div class="item">
            <ui-gmap-google-map center="myMap.center" zoom="myMap.zoom" draggable="true"     control="control" options="options">
                <ui-gmap-marker coords="myMarker.coords" options="myMarker.options" events="" idkey="myMarker.id">
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </div>
    <div class="item">
      List of nearby medical services:
    </div>

    <div ng-repeat="place in places">
      <div class="item item-divider">
        {{place.name}}
      </div>
      <div class="item">
        {{place.vicinity}}
      </div>
    </div>
</div>
 <div class="padding">
       <button ng-click="getMap()" class="button button-positive button-block button-outline">Search</button>
    </div>
    </ion-content>
    </ion-view>

controller code is :

.controller('DashCtrl', function($scope, $cordovaGeolocation, uiGmapGoogleMapApi, uiGmapIsReady, ngGPlacesAPI) {

var posOptions = {timeout: 10000, enableHighAccuracy: false};

// get user location with ngCordova geolocation plugin
$cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      $scope.lat  = position.coords.latitude;
      $scope.long = position.coords.longitude;

      // get nearby places once we have user loc in lat & long
      ngGPlacesAPI.nearbySearch({
            radius:1000000,
            type: 'hospital',
          latitude: $scope.lat,
          longitude: $scope.long
      }).then(
          function(data){
              console.log('returned with places data', data);
              $scope.places = data;
              return data;
          });

      // create new map with your location
      uiGmapGoogleMapApi.then(function(maps){

        $scope.control = {};

        $scope.myMap = {
            center: {
                latitude: $scope.lat,
                longitude: $scope.long
            },
            zoom : 14
        };
        $scope.myMarker = {
            id: 1,
            coords: {
                latitude: $scope.lat,
                longitude: $scope.long
            },
            options: {draggable:false}
        };

      });

    }, function(err) {
      // error
    });

});

app.js code :

// 'mychat.services' is found in services.js
// 'mychat.controllers' is found in controllers.js
angular.module('mychat', ['ionic', 'ngCordova', 'firebase', 'angularMoment', 'mychat.controllers', 'mychat.services', 'uiGmapgoogle-maps', 'ngGPlaces'])

this is what it looks like in the browser and on my iphone

map.jpg1280x800 127 KB

i have downloaded the cordova whitelist plugin and its still not displaying as it should. theres no errors in the console

can anyone help?

thanks