Map not showing up


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="" zoom="myMap.zoom" draggable="true"     control="control" options="options">
                <ui-gmap-marker coords="myMarker.coords" options="myMarker.options" events="" idkey="">
    <div class="item">
      List of nearby medical services:

    <div ng-repeat="place in places">
      <div class="item item-divider">
      <div class="item">
 <div class="padding">
       <button ng-click="getMap()" class="button button-positive button-block button-outline">Search</button>

controller code is :

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

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

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

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

      // create new map with your location

        $scope.control = {};

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


    }, function(err) {
      // error


app.js code :

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

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

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

can anyone help?