Moving Map Controls on Angular 2 Google Maps

Question

I am looking for a way to use the zoomControlOptiions property available in regular google maps, like so:

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

Stackoverflow example showing code above
Same thing in the official google maps docs

Unfortunately, I don't see this option in Angular 2 Google Maps API Docs. Is there a way to do it? Is there a way to use the full functionality despite using the Angular 2 wrapper?

Note that just running this code works fine:

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

    console.log(map.getZoom());

I am able to get the native google maps object and run methods / set properties on it. The problem occurs when I try to use zoomControlOptions, which is coming directly from the docs

Edit: So, it actually works, the problem now is getting around the Typescript compiler complaining.

Edit 2: I fixed the issue, but if anyone wants the bounty - feel free to explain why zoomControlOptions aren't natively available.

score 1 · Answer 1 · answered Feb 21 '17 at 16:27

You can get a reference to the native map object and then add the zoomControlOptions. A full example of getting the map reference 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
        });


      });

  }

}

score 1 · Answer 2 · answered Feb 24 '17 at 19:47

So, apparently all I needed to do was make sure the compiler doesn't complain by creating an interface:

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

and then using it when setting 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 don't actually know why some props are on the map object and some are not though, but this works without errors.

Moving Map Controls on Angular 2 Google Maps

2 Answers2