Managing moving maps on Angular 2 Google Maps

Question

I'm looking for a way to use the zoomControlOptiions property, available on regular Google maps, for example:

zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.LEFT_CENTER }, 

stack overflow
Same thing in official google maps docs

Unfortunately, I do not see this option in the Angular 2 Google Maps API Docs . Is there any way to do this? Is there any way to use full functionality despite using Angular 2 wrapper?

Note that just running this code works fine:

  map.setOptions({ zoom: 1, center: position, zoomControl: true }); console.log(map.getZoom()); 

I can get my own google map object and run methods / set properties on it. The problem occurs when I try to use zoomControlOptions , which comes directly from docs

---

Edit: This way it really works, the problem now turns around with the Typescript compiler.

Edit 2: I fixed the problem, but if someone wants a reward, feel free to explain why zoomControlOptions not available.

Answer 1

You can get a link to your own map object, and then add zoomControlOptions. A complete example of obtaining a map link is found at https://github.com/philipbrack/example-angular2-google-maps-getNativeMap :

 import {Component, OnInit} from '@angular/core'; import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core'; declare var google:any; @Component({ selector: 'app-map-content', template: '' }) export class MapContentComponent implements OnInit { constructor(public mapApiWrapper:GoogleMapsAPIWrapper) { } ngOnInit() { this.mapApiWrapper.getNativeMap() .then((map)=> { // I have been manually updating core/services/google-maps-types.d.ts to include things they didn't include. console.log(map.getZoom()); let position = new google.maps.LatLng(45.521, -122.677); var cityCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, center: position, radius: 10000 }); }); } } 

Answer 2

So, apparently, all I had to do was make sure that the compiler is not complaining about creating an interface:

 interface NativeGoogMapProps { zoomControlOptions?: any; streetViewControlOptions?: any; } 

and then using it when configuring map options:

  let zoomControlOptions: any = { style: google.maps.ControlPosition.small, position: google.maps.ControlPosition.RIGHT_CENTER }; let streetViewControlOptions: any = { position: google.maps.ControlPosition.RIGHT_CENTER }; map.setOptions(<NativeGoogMapProps>{ zoomControlOptions: zoomControlOptions, streetViewControlOptions: streetViewControlOptions }); 

I really do not know why some details are on the map object, and some are not, but this works without errors.