title: Apply google.maps.LatLngBounds() but not working - Ionic
body: <p>I'm trying to add google maps in my ionic project. Other than that, I want all the markers in google maps fits all in screen. I don't know where it wrong. My reference here <a href="https://developers.google.com/maps/documentation/javascript/reference?csw=1#LatLngBounds" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/reference?csw=1#LatLngBounds</a> </p>
  
  <p>Here is the code</p>
  
  <p><strong>HTML: index.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;amp&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/directives.js"&gt;&lt;/script
  </code></pre>
  
  <p><strong>HTML: home.html</strong> </p>
  
  <pre><code>&lt;ion-content&gt;   
     &lt;map on-create="mapCreated(map)"&gt;&lt;/map&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>JS: directives.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('starter.directives', [])
  
      .directive('map', function() {
        return {
          restrict: 'E',
          scope: {
        onCreate: '&amp;'
      },
      link: function ($scope, $element, $attr) {
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(43.07493, -89.381388),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map($element[0], mapOptions);
  
          $scope.onCreate({map: map});
  
          // Stop the side bar from dragging when mousedown/tapdown on the map
          google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
            e.preventDefault();
            return false;
          });
        }
  
        if (document.readyState === "complete") {
          initialize();
        } else {
          google.maps.event.addDomListener(window, 'load', initialize);
        }
      }
    }
  });
  </code></pre>
  
  <p><strong>JS: app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])
  </code></pre>
  
  <p><strong>JS: controllers.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.mapCreated = function (map) {
          $scope.map = map;
  
          var pos = new Array (new google.maps.LatLng(3.050511,101.687833), new google.maps.LatLng(3.122847,101.676846), new google.maps.LatLng(3.078409,101.608025), new google.maps.LatLng(2.932928,101.642603));
  
          //Create marker
          var createMarker = function (pos, icon) {
              console.log("create marker");
              var marker = new google.maps.Marker({
                  position: pos,
                  map: map,
                  icon: icon,
              });
          }
  
          var getAllMarkers = function(){
              var bounds = new google.maps.LatLngBounds();
              for(var i=0; i&lt;pos.length; i++){
                  bounds.extend(pos[i]);
                  createMarker(pos[i], 'https://maps.google.com/mapfiles/ms/icons/red-dot.png');
              }
  
              $scope.map.fitBounds (bounds);
          }
  
          getAllMarkers();
          $scope.map.setCenter(pos[0]);
      };
  </code></pre>
  
  <p><strong>Output from the code: Picture 1</strong></p>
  
  <p><a href="https://i.stack.imgur.com/pFAaN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pFAaN.png" alt="Picture 1"></a></p>
  
  <p><strong>This is the output that I want: Picture 2</strong></p>
  
  <p><a href="https://i.stack.imgur.com/DdXv3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DdXv3.png" alt="Picture 2"></a></p>