Unable to set zoomControlOptions on Google Maps in Angular 2

2.4k Views Asked by At

First, I get the native Google maps element, because as far as I can tell, the Angular 2 API doesn't expose it. That looks like the code below and works fine:

import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

constructor(public mapApiWrapper: GoogleMapsAPIWrapper ) {}

this.mapApiWrapper.getNativeMap().then((map)=> {}

All this works great and I am able to set options on the native map element, for example, the code below works:

    let position: any = new google.maps.LatLng(45.521, -122.677);

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

However, when I try to set MapOptions and move the zoom controls via ZoomControlOptions, I get a bunch of errors. What I try is this:

    let zoomControlOptions: any = new google.maps.zoomControlOptions({
      style: google.maps.ControlPosition.small,
      position: google.maps.ControlPosition.LEFT_CENTER
    });

This throws:

TypeError: google.maps.zoomControlOptions is not a constructor

If I try to do this:

    map.setOptions({
      zoom: 1,
      center: position,
      zoomControlOptions: {
        style: google.maps.ControlPosition.small,
        position: google.maps.ControlPosition.LEFT_CENTER
      }
    });

it throws:

Argument of type '{ zoom: number; center: any; zoomControlOptions: { style: any; position: any; }; }' is not assignable to parameter of type 'MapOptions'. Object literal may only specify known properties, and 'zoomControlOptions' does not exist in type 'MapOptions'

I am pretty lost at this point, because I see that MapOptions takes a zoomControlOptions arg in the docs...

1

There are 1 best solutions below

1
On

As you are manipulating directly the native map, you are outside angular2-google-maps universe.

EDIT

Previous answer for #1 was wrong, it seems there is no such thing than a ZoomControlOptions constructor. Creating an object litteral works fine.

let zoomControlOptions: any = new {
  style: google.maps.ControlPosition.small,
  position: google.maps.ControlPosition.LEFT_CENTER
);

As for issue #2, examples around (here and here) always set zoomControlOptions along with zoomControl: true