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

[davidpelayo]

@maissani, @Masadow, like in other open source communities, I think we need to report the issues giving working in examples (plunkr or similars) so we can compare, test, run and debug concretely to each case.

I will contribute adding guidelines on how to report the issues. For sure, once provided working examples where we can see the bugs, I go tagging and suggesting solutions.

Many thanks.

[maissani]

@davidpelayo Need some couples of time to provide you an example, i am hardly busy at the moment. I will send you one ASAP.

Best Regards,

[davidpelayo]

@maissani I've added ISSUE_TEMPLATE.md so there explains how to report a potential bug better.

Please provide detailed info, as per the ISSUE_TEMPLATE, including jsbins/plunkr/jsfiddle in order to help you better.

Thanks.

[charliefurniss]

hi there

I am using 2.3.2 and have the same error message angular-google-maps: a center or bounds property is required but only on a version that I've deployed to Heroku. Locally everything works fine.

[samiroquai]

Same issue here: error appears in console in 2.3.3, map not rendered. Rolled back to 2.3.2 for the moment.

[Carsyl]

Try this, it works fine for me...

in your controller

    // all the basics settings (don't need google.map helpers)
    $scope.map = {
            center: {
              latitude: -23.598763,
              longitude: -46.676547
            },
            zoom: 10,
            options: {                    
                streetViewControl: false,
                mapTypeControl: false,
                scaleControl: false,
                rotateControl: false,
                zoomControl: false
            }
        };        

    uiGmapGoogleMapApi.then(function(maps) {
        // You can now merge your options which need google.map helpers
        angular.merge($scope.map, {
             options: {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.LARGE,
                        position: google.maps.ControlPosition.LEFT_CENTER
                    }
                }
        });
    })

not so ugly, i hope it helps you.

Tested on 2.3.3

[Rex90]

Whats the latest on this issue?

[Alberick]

I'm also having the same issue with 2.3.3 downgrading fixed it.

[bertgoossens]

if (!angular.isDefined(scope.center) && !angular.isDefined(scope.bounds)) { $log.error('angular-google-maps: a center or bounds property is requiqdfqsdfred'); return; }

If I try to log the scope object it has a center property. If i try to log scope.center is gives undefined.

[bertgoossens]

If I add a delay the scope.center is available

[SamuelToh]

+1 for this.

2.3.2 works for me, however the cluster marker image is broken. (see comment below).

**Updated: Ooops sounds like I was using a deprecated API clusterOptions hence the 404 error.

Error = GET http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m1.png 404 (Not Found)

Navigated to http://google-maps-utility-library-v3.googlecode.com/ and found that they have moved to Github. So downgrading is not quite an option for me...

Does anyone know the corresponding Github URL to the old google-maps-utility-library-v3 project project? Tried googling and the best one I found online was https://github.com/googlemaps/google-maps-js-utils

Not sure whether that is the correct one or not, the README.md is empty, browse the files a bit and could not find any image file.

[stephengardner]

Hey guys, Obviously this is a breaking change and is causing some issues.

The error will arise if you try to add the ui-gmap-google-map element to the DOM without a center or bounds...

So, don't add it until the center or bounds is ready.

Say you store your information on a map object.

<ui-gmap-google-map ng-if="map.center"
    options="map.options" 
    center="map.center"
    zoom="map.zoom">
</ui-gmap-google-map>

This works.

Because by nature, ng-if doesn't add that element to the DOM unless map.center is ready.

Cheers

[robertio4]

I have the same issue. I tried your solution and the map is rendered, but the error does not disappear. Still appears angular-google-maps: a center or bounds property is required

[eriksendc]

Any update on this issue? @stephengardner I'm not sure I understand about "If you try to add the ui-gmap-google-map element to the DOM without a center or bounds... In my [static] html file I want to have

<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control="map.control">

but there's no way to predict what the center of the map will be, because it's based on data that needs to be retrieved from the server (via another web api call / promise). So I'll never know the center or bounds before I add the element to the DOM. Do we now need to add the main element dynamically? That doesn't feel very AngularJS-y.

-Brian Eriksen

[gcubar]

Thanks @stephengardner! Its work for me.

[stephengardner]

@eriksendc <ui-gmap-google-map ng-if='map.center' center='map.center' zoom='map.zoom' options='map.options' control="map.control"> should work.

Notice the ng-if. What ng-if does is prevent that <ui-gmap-google-map> element from ever entering the DOM itself. when ng-if is satisfied (true), then the element gets added to the DOM, and all goes well. Does that make sense? Because the problem is, at element creation, the elment MUST HAVE a center attribute. What angular is allowing us to do here is WAIT for your API call to return, and THEN add it to the DOM. Add that ng-if statement to your element.