Error using new release - a center or bounds property is required

[Masadow]

I instantiate my map this way :

<ui-gmap-google-map
    ng-class="{'big': big, 'medium': medium, 'small': small}"
    var-data="campuses" 
    center="map.center"
    zoom="map.zoom"
    dragging="true"
    refresh="true"
    options="map.options"
    events="map.events"
    bounds="map.bounds"
    pan="true">

    <ui-gmap-markers
        models="map.markers"
        coords="'coords'"
        idKey="'idKey'"
        icon="'icon'"
        doCluster="!disableCluster"
        clusterOptions="map.clusterOptions"
        fit='true'
        doRebuildAll="false"
        events="map.markersEvents"
        control="map.markersControl"
        options="map.markersOptions">
    </ui-gmap-markers>

</ui-gmap-google-map>

Here is the content of map before rendering :

{
  "center": {
    "latitude": 46.2157467,
    "longitude": 2.2088258
  },
  "markersControl": {

  },
  "zoom": 6,
  "options": {
    "scrollwheel": true,
    "zoomControl": true,
    "disableDoubleClickZoom": false,
    "styles": [
      {
        "featureType": "administrative.country",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [
          {
            "visibility": "on"
          },
          {
            "gamma": "1.00"
          },
          {
            "weight": "1.00"
          }
        ]
      },
      {
        "featureType": "administrative.country",
        "elementType": "labels",
        "stylers": [
          {
            "color": "#828282"
          },
          {
            "visibility": "simplified"
          },
          {
            "weight": "0.01"
          }
        ]
      },
      {
        "featureType": "administrative.country",
        "elementType": "labels.text.stroke",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      },
      {
        "featureType": "administrative.province",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "administrative.locality",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "administrative.neighborhood",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "administrative.land_parcel",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      },
      {
        "featureType": "landscape",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "visibility": "on"
          },
          {
            "saturation": "20"
          }
        ]
      },
      {
        "featureType": "landscape.natural.landcover",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "landscape.natural.terrain",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.school",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "labels",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
          {
            "visibility": "simplified"
          }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "labels",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "visibility": "on"
          },
          {
            "saturation": "49"
          }
        ]
      }
    ],
    "streetViewControl": false,
    "mapTypeControl": false,
    "panControl": false,
    "draggable": true,
    "zoomControlOptions": {
      "style": "small",
      "position": 5
    },
    "disableMarkerClick": false,
    "maxZoom": 15
  },
  "markers": [

  ],
  "clusterOptions": {
    "styles": [
      {
        "url": "\/modules\/core\/icons\/map\/cluster.svg",
        "width": 64,
        "height": 64,
        "backgroundPosition": "16, 13",
        "fontWeight": "bold",
        "textColor": "#ffffff"
      }
    ],
    "averageCenter": true,
    "zoomOnClick": true
  },
  "markersOptions": {
    "clickable": true
  }
}

The map is not showing and my console shows the following error :

angular-google-maps: a center or bounds property is required

Note: Everything works in 2.3.2 and I don't see any breaking changes in the changelogs

[xavhan]

It seems that you forgot to add a bounds property like the error message says

[Masadow]

@xavhan the error says I must provide either a center or bounds property. I tried to add both, it does not work either :(

[xavhan]

@Masadow Sure but you should remove the bounds attribute of your directive, that is provided with an undefined

[Masadow]

@xavhan The bounds property is used to update the map live. Our app is working perfectly that way in 2.3.2 so if there is a breaking change regarding this, it should at least be documented ? I don't have a clue about how to adapt my code since the break is not documented.

[johanronn77]

I have the same issue.

[chogarcia]

same here

[ivanovevgeny]

+1
with version 2.2.1 app works correct. after update to 2.3.3 app broken with the error above.

[chogarcia]

I can confirm that with 2.3.2 works good.

[devntd]

I have the same issue.

[MarceloPrado]

I figure it out. On my case, I needed to set up map properties before the map was actually ready.

I had this:

    // The "then" callback function provides the google.maps object.
    uiGmapGoogleMapApi.then(function(maps) {
        console.log('Google Maps loaded');
         vm.map = {
         center: {
            latitude: -23.598763,
            longitude: -46.676547
          },
          zoom: 13
    };
  });

Needed to change to this

//Inside map controller
    vm.map = {
        center: {
            latitude: -23.598763,
            longitude: -46.676547
        },
        zoom: 13
    };
    // The "then" callback function provides the google.maps object.
    uiGmapGoogleMapApi.then(function(maps) {
        console.log('Google Maps loaded');
    });

Even though I don't think this is the best way to do it, it fixed the angular-google-maps: a center or bounds property is required.

Hope it helps!

[maissani]

@MarceloPrado It's not a good and effective solution,
If you wana pass google helpers , you need to be on the promise scope.

This why I recomend to don't use @MarceloPrado fix if you intend to use google.maps object in your uiGmapGoogleMapApi promise (it will obviously don't work and this is realy dirty)

This is a regular call & obviously less dirty:

# in your controller

        uiGmapGoogleMapApi.then(function(maps){
            // Configuration needed to display the road-map with traffic
            // Displaying Ile-de-france (Paris neighbourhood)
            maps.visualRefresh = true;
            $scope.map = {
                center: {
                  latitude: -23.598763,
                  longitude: -46.676547
                },
                zoom: 13,
                options: {
                    mapTypeId: google.maps.MapTypeId.ROADMAP, // This is an example of a variable that cannot be placed outside of uiGmapGooogleMapApi without forcing of calling ( like ugly people ) the google.map helper outside of the function
                    streetViewControl: false,
                    mapTypeControl: false,
                    scaleControl: false,
                    rotateControl: false,
                    zoomControl: false
                }, 
                showTraficLayer:true
            };
            console.log($scope.map); 
            $scope.isOffline = false;
        })

# in your view

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options'>
    <ui-gmap-layer type="TrafficLayer" show="map.showTraficLayer"></ui-gmap-layer>
</ui-gmap-google-map>

Obviously the previously example doesn't works in 2.3.3. and works in 2.3.2.

Having the same issue and waiting for a good resolve.

This issue should be tag as an api-breaking issue & p1-urgent-priority.

Cordialy,
Mehdi Aissani

[drew-r]

+1
Will be reverting to 2.3.2.

[kjaquier]

Same issue when upgrading from 2.1 to 2.3.3. Downgrading to 2.3.2 fixed it.

[maissani]

@davidpelayo Can you tag this issue, solve or provide any explaination of this bug/api-breaking ?

Thx a lot.

Best Regards,
Mehdi Aissani