CODEWITHSUNDEEP
angularjsangular-google-mapsmobile-angular-ui
Joruus
Joruus

Reputation: 90

Fit zoom to show all markers. I already set center correctly

I have a map with several markers and I need to fit them all to the window. I'm using Mobile Angular UI: http://mobileangularui.com/ and Angular Google Maps: http://angular-ui.github.io/angular-google-maps/#!/

I define map with default center and zoom:

$scope.map = {
  center: {        // set on XXX as initial default
    latitude: 45.322594, 
    longitude: -2.938249 
  },
  zoom: 14,
  options: mapServices.getMapOptions().mapOptions
};

When I add markers to the map y extend bounds: 

var markers = [];
var bounds = new google.maps.LatLngBounds();

for loop ....

var marker = {
          latitude: indicadores[i].sensores[j].lat, //43.401188,
          longitude: indicadores[i].sensores[j].lon, //-5.823359,
          title: indicadores[i].sensores[j].nombre,
          valor: getValor(indicadores[i], indicadores[i].sensores[j].ultimo_valor, indicadores[i].sensores[j].ultimo_estado),
          url: "#/sensor/" + $scope.$parent.Despliegue.id + "/"+ indicadores[i].id + "/" + indicadores[i].sensores[j].id,
          id: i,
          fit: true,
          options: { 
            icon: { url: obtenerImagen(indicadores[i].factor_ambiental, indicadores[i].sensores[j].ultimo_estado) }
          },
          showWindow: false,
        };

var latlng = new google.maps.LatLng(marker.latitude, marker.longitude);
bounds.extend(latlng);

markers.push(marker);

And then I get center and apply bounds: 

var centro = bounds.getCenter();

$scope.map.center = { 
   latitude: centro.lat(),
   longitude: centro.lng()
}

var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();

$scope.map.bounds = {
   northeast: {
      latitude: ne.lat(),
      longitude: ne.lng()
   },
   southwest: {
      latitude: sw.lat(),
      longitude: sw.lng()
   }
}

I'm having the map perfectly centered but it doesn't zoom to fit all markers.

Any help, please? Thanks in advance!

Upvotes: 2

Views: 1465

Answers (1)

mlivan
mlivan

Reputation: 661

Try to use in tag <ui-gmap-markers> fit option fit="'true'" in your template file

<ui-gmap-markers idKey="map.dynamicMarkers.id" models="map.dynamicMarkers" coords="'self'"
fit="'true'">

Upvotes: 3

Related Questions