Angular-google-maps: Map zoom doesn't change when zoom property is changed

[stewieoO]

Issue description
Before, i don't know which version broke it, you were able to change the zoom property after initialising the map and the map would react to the change.

Now you can only set the zoom once and then can't change it.

Is this on purpose?

angular2 & angular2-google-maps version
0.12.0

[basvdijk]

Do you mind sharing how you have set the zoom level? I receive a InvalidValueError: setZoom: not a number when settings the zoom like:
<sebm-google-map disableDefaultUI="true" zoom="11" [latitude]="lat" [longitude]="lng">

[stewieoO]

@basvdijk
I set it like this

<sebm-google-map [latitude]="mapOptions.lat"
                     [longitude]="mapOptions.lng"
                     [zoom]="mapOptions.zoom"
                     [disableDefaultUI]="false"
                     (mapClick)="mapClicked($event)">
</sebm-google-map-marker>

mapOptions.zoom is a number.
Just that before when i changed mapOptions.zoom the zoom level of the map changed.
Now it doesn't

[basvdijk]

Thanks! It turned out that somehow the zoom level must be a variable setting zoom="1" on the sebm-google-map doesn't work.

[stewieoO]

@basvdijk
Oh, good to know.
Though a "variable" setting seems to be wrong aswell. Atleast for the moment. Or is the map updating it's zoom if you change your value?

[basvdijk]

Nope it is just that I didn't like the default zoom level and want to zoom out a bit more.

[brian-singer]

@siegerx3 I noticed the same thing but as far as I am aware dynamically changing the zoom has not worked since 0.9.0. There are no listeners on this value.

[stewieoO]

@brian-singer @SebastianM
Just out of interest, as it was working before, was there any reason to remove the listeners?

[brian-singer]

@siegerx3 P1 bugfix for milestone 0.13.0!

[stewieoO]

@brian-singer @SebastianM
Tested in my test project and it seems to work.
Can't make a pull request though, because when i try to build i get an error in the gulp file.
"unexpected token =>" and also during npm install there are some peer errors at the end. Not sure if related.

Added the 3 lines for the zoom in ngOnChanges and also the _updateZoom() function in 'google-map.ts'. Did i miss any kind of validation or is that it?

ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    this._updateMapOptionsChanges(changes);
    if (changes['latitude'] != null || changes['longitude'] != null) {
      this._updateCenter();
    }
    if(changes['zoom'] != null){
      this._updateZoom();
    }
  }

private _updateZoom(){
    if(typeof this.zoom !== 'number'){
      return;
    }
    this._mapsWrapper.setZoom(this.zoom);
  }

[alexweber]

@siegerx3 Awesome, looks good to me! Wanna make it into a PR and we'll see what @SebastianM thinks?

[stewieoO]

@alexweber
As i said, can't build or test my local repo.
I just took the google-map.js which was built by the ts compiler and copied it in my node_modules to test it.

I get errors after npm install and when i try to build with gulp and test :/

[stewieoO]

@brian-singer
Ah, didn't see that this is how it's done.
Apparently i didn't read the comments enough above the methods^^

Thanks :)

[Nirachan8]

My project has many markers in sebm google map. So i want to zoom to show all map markers in map copmonent. How can i zoom dynamically.

[cpamp]

@Nirachan8 Sounds like bounds are better for your scenario.