title: Issue to set map in center so multiple marker display
body: <p>i am using ionic framework. i created map and multiple markers and value came from server side.all data came properly but i don't know why i getting this error- </p>
  
  <pre><code>ionic.bundle.js:25642 TypeError: Cannot read property 'fitBounds' of null
      at autoCenter (app.js:147)
      at app.js:135
      at processQueue (ionic.bundle.js:27879)
      at ionic.bundle.js:27895
      at Scope.$eval (ionic.bundle.js:29158)
      at Scope.$digest (ionic.bundle.js:28969)
      at Scope.$apply (ionic.bundle.js:29263)
      at done (ionic.bundle.js:23676)
      at completeRequest (ionic.bundle.js:23848)
      at XMLHttpRequest.requestLoaded (ionic.bundle.js:23789)
  </code></pre>
  
  <p>code :
      angular.module('starter', ['ionic', 'ngCordova'])</p>
  
  <pre><code>.run(function ($ionicPlatform, GoogleMaps) {
    $ionicPlatform.ready(function() {
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  
        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
      GoogleMaps.init();
    });
  })
  .config(function ($stateProvider, $urlRouterProvider) {
  
      $stateProvider
      .state('map', {
          url: '/',
          templateUrl: 'templates/map.html',
          controller: 'MapCtrl'
      });
  
      $urlRouterProvider.otherwise("/");
  
  })
  .factory('Markers', function ($http) {
  
      var markers = [];
  
      return {
          getMarkers: function () {
  
              return $http.get("http://localhost:8080/LocationServices/markers.php").then(function (response) {
                  markers = response;
                  return markers;
              });
  
          }
      }
  
  })
  
  .factory('GoogleMaps', function ($cordovaGeolocation, Markers) {
  
      var apiKey = false;
      var map = null;
      var zoomVal = 15
  
      function initMap() {
  
          var options = { timeout: 10000, enableHighAccuracy: true };
  
          $cordovaGeolocation.getCurrentPosition(options).then(function (position) {
  
              var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
              console.log("Latitude current: ", position.coords.latitude);
              console.log("Longitude current: ", position.coords.longitude);
  
              var mapOptions = {
                  center: latLng,
                  zoom: zoomVal,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
              //Wait until the map is loaded
              google.maps.event.addListenerOnce(map, 'idle', function () {
  
                  var marker = new google.maps.Marker({
                      map: map,
                      animation: google.maps.Animation.DROP,
                      position: latLng
                  });
                  //Load the markers
                  loadMarkers(map);
                  //map.setCenter(new google.maps.LatLng(-37.92, 151.25));
  
              });
  
          }, function (error) {
              console.log("Could not get location");
  
              //Load the markers
              loadMarkers(map);
              //map.setCenter(new google.maps.LatLng(-37.92, 151.25));
          });
  
      }
  
      function loadMarkers(map) {
  
          //Get all of the markers from our Markers factory
          Markers.getMarkers().then(function (markers) {
  
              console.log("Markers: ", markers);
              var markersss = new Array();
  
              var records = markers.data.markers;
  
              for (var i = 0; i &lt; records.length; i++) {
  
                  var record = records[i];
                  console.log("Latitude: ", record.lat);
                  console.log("Longitude: ", record.lng);
                  var markerPos = new google.maps.LatLng(record.lat, record.lng);
                  console.log("marker position", "" + markerPos);
  
                  // Add the markerto the map
                  var marker = new google.maps.Marker({
                      map: map,
                      animation: google.maps.Animation.DROP,
                      position: markerPos
                  });
  
                  markersss.push(marker);
  
                  var infoWindowContent = "&lt;h4&gt;" + record.name + "&lt;/h4&gt;";
  
                  addInfoWindow(marker, infoWindowContent, record);
  
              }
              autoCenter(map, markersss);
          });
      }
      function autoCenter(map1, markersss) {
          //Create a new viewpoint bound
          var bounds = new google.maps.LatLngBounds();
          //Go through each...
          for (var i = 0; i &lt; markersss.length; i++) {
              bounds.extend(markersss[i].position);
              console.log("bounds position", "" + markersss[i].position);
          }
          //Fit these bounds to the map
          map1.fitBounds(bounds);
          map1.setCenter(bounds.getCenter());
          //remove one zoom level to ensure no marker is on the edge.
          map1.setZoom(vm.googleMap.getZoom() - 1);
  
          // set a minimum zoom
          // if you got only 1 marker or all markers are on the same address map will be zoomed too much.
          if (map1.getZoom() &gt; zoomVal) {
              map1.setZoom(zoomVal);
          }
      }
      function addInfoWindow(marker, message, record) {
  
          var infoWindow = new google.maps.InfoWindow({
              content: message
          });
  
          google.maps.event.addListener(marker, 'click', function () {
              infoWindow.open(map, marker);
          });
  
      }
  
      return {
          init: function () {
              initMap();
          }
      }
  
  })
  
  .controller('MapCtrl', function ($scope, $state, $cordovaGeolocation) {
  
  });
  </code></pre>