How to change zoom control options

[iMomen]

Hello,
I'm trying to set the zoom control position to something like 'BOTTOM_LEFT' but no luck
I can set the style but the position not working

    $scope.mapOptions = {
        disableDefaultUI: false,
        streetViewControl: false,
        zoomControlOptions: {
            position: 'BOTTOM_CENTER',
            style: 'SMALL'
        },
        mapTypeControl: false,
        panControl: false,
        scrollwheel: false,
        styles: $scope.mapStyle
    }

Thanks

[iMomen]

Any updates ?

[eczajk1]

like this?

zoomControlOptions: {
  position: window.google.maps.ControlPosition.BOTTOM_CENTER,
  style: 'SMALL'
}

[iMomen]

I already tried this,
But it gives me
TypeError: Cannot read property 'maps' of undefined
@eczajk1

[eczajk1]

If you're loading the sdk asynchronously, you'll have to wait for the promise, and then use google.maps.

[nmccready]

BTW the sdk loads default for you async; so use a promise.

To give more prescriptive advice, you could do something like this:

Where you would set options, based on the available locations KEYS

map.setOptions({zoomControlOptions: {position: this.$window.google.maps.ControlPosition.LEFT_TOP}});

return {
      center: {latitude: this.$scope.latitude, longitude: this.$scope.longitude},
      zoom: 17,
      events: {
        tilesloaded: (map) => {
          //here you have the map instance 
          this.mapInstance = map;
          if (!this.loaded) {
            map.setOptions({zoomControlOptions: {position: this.$window.google.maps.ControlPosition.LEFT_TOP}});
            this.$scope.$apply(() => {
              this.loaded = true;
              this.updateMapWithPlaces(map, []);
            });
          }

        }
      }
    };