Angular-google-maps: Zoom control icons disappear after configuring zoomControlOptions position

[lolaswift]

Issue description
zoomControlOptions position is not working

Steps to reproduce and a minimal demo of the problem
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[zoomControl]="true"
[zoomControlOptions]="{position: 'TOP_LEFT'}"
(mapClick)="mapClicked($event)"
(mapReady)="onMapReady($event)">

_Use https://plnkr.co or similar -- try this template as a starting point: http://plnkr.co/edit/YX7W20?p=preview

https://stackblitz.com/edit/angular-google-maps-demo-7cmc4g?file=app/app.component.html

_What steps should we try in your demo to see the problem?_

Current behavior
Zoom controls disappear

Expected/desired behavior
Should show on the position specified

angular2 & angular-google-maps version
angular 5.0, latest angular-google-maps version

Other information

[lazarljubenovic]

I've never used this option myself and I don't currently have a handy Angular project with me where I can quickly try this, but upon inspecting the source code, I see that ZoomControlOptions (the type you're supposed to give it) is using ControlPosition, which is an enumeration, not a string; you're giving it a string.

[lolaswift]

thx, lazarljubenovic. I am new to typescript.
Can you please give me some code example how to pass the right param?
I want to place the controls RIGHT_TOP

[timcblank]

Need to install googlemap types
npm install @types/googlemaps

Then in the component import the types.
import { } from 'googlemaps';

Then need to define the position for use through a variable in the component

zoomPosition: google.maps.ControlPosition = google.maps.ControlPosition.TOP_RIGHT;

Then pass that through interpolation to the element
[zoomControlOptions] = "{position: zoomPosition}"

Works when I try it in your stackblitz example above.

[lolaswift]

@timcblank Many thx for your help. You solution works in the stackblits example.
However, I use ionic 3 and I got 'ReferenceError: google is not defined' error. Any idea?

[timcblank]

"google" is defined as a type from the types install with the project. You get access to those types from import. Make sure you've also included the AgmModule with your app module and any lazy loaded modules using AGM correctly as well. That info should be part of the getting started bit on the website for this library.

[lolaswift]

@timcblank thx for the tips.
Adding AgmModule to the app module wasn't necessary.

After some struggling, I found the way.

I assigned the value in onMapReady(map) {
google.maps.ControlPosition = google.maps.ControlPosition.TOP_RIGHT;
this.zoomPosition = google.maps.ControlPosition;
}

You solution SOLVED my issue. Millions of thanks tim!

[lolaswift]

I use Agm with ionic 3.x. To help other people. Here is what I did:
1.npm install @types/googlemaps

1. ts.

import { } from 'googlemaps';
declare const google: any;

zoomPosition: any //Defined the variable above the constructor

map.setOptions({
zoomControl: 'true',
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
});

3.html:

[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
(mapClick)="mapClicked($event)"
(mapReady)="onMapReady($event)">

@timcblank thanks again. People like you deserve lots of respect.

[sumitdaga]

@lolaswift not sure how you got it working
it is not working for me

this is what i did
import { } from 'googlemaps';
declare const google: any;

zoomPosition = google.maps.ControlPosition.TOP_LEFT

i still get 'ReferenceError: google is not defined'

any help will be appreciated!

thanks

[lolaswift]

@sumitdaga
You need to run it in your mapReady function.

onMapReady(map) {
map.setOptions({
zoomControl: 'true',
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
});
}

Don't forget to have mapReady on your template like this:
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
(mapClick)="mapClicked($event)"
(mapReady)="onMapReady($event)">

[sumitdaga]

@lolaswift

Thanks a lot ! ...it worked !
still curious though, how the stackblits example of timcblank worked !

thanks anyway

[lolaswift]

@sumitdaga
I am not sure. I guess it has something to do with lazyloading. You can only set those options when the map is ready.

[timcblank]

All googlemap types are imported through the command

import { } from 'googlemaps';

You don't need to declare the variable google at all. It becomes available inside the MapsAPILoader load function or onMapReady function or inside a function called from the map element on callback. You can't use the google types outside that.

[shoudaos]

All you need is to:
import { ControlPosition } from '@agm/core/services/google-maps-types';
and then:

zoomControlOptions: {
      position: ControlPosition.TOP_LEFT
 }

[sumitdaga]

thanks! @shoudaos

this makes more sense!

[lolaswift]

@shoudaos. Many thanks!

[SebastianM]

➡️ Im closing this because I don't see any bug. Feel free to reopen if you still think there's a bug or comment below.

[mahfuzur]

@SebastianM I am alson stuck with this issue
[zoomControlOptions]="{position: 'TOP_LEFT'}">

can you please give a right example

[lolaswift]

@mahfuzur . I do it like this

ts:

import { ControlPosition } from '@agm/core/services/google-maps-types';

onMapReady(map) {
map.setOptions({
zoomControl: 'true',
zoomControlOptions: {
position: ControlPosition.TOP_LEFT
}
});
}

html:

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapClick)="mapClicked($event)" (mapReady)="onMapReady($event)">

[Defmetalhead]

I feel like this is an issue, or the documentation should be updated. The documentation tells me I can do

[zoomControlOptions]="{position: LEFT_TOP}"

Instead I have to do

public mapReadyHandler(map): void {
        this.map = map;
        this.map.setOptions({
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            }
        });
    }

[ignatov-dmitry]

@mahfuzur . I do it like this

ts:

import { ControlPosition } from '@agm/core/services/google-maps-types';

onMapReady(map) {
map.setOptions({
zoomControl: 'true',
zoomControlOptions: {
position: ControlPosition.TOP_LEFT
}
});
}

html:

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapClick)="mapClicked($event)" (mapReady)="onMapReady($event)">

thanks you! this solution helped me

[ghost]

don't follow @lolaswift or @diomededavid 's advice ;)

set position to ControlPosition.TOP_LEFT, importing ControlPosition from @agm/core

If all else fails, you can look up the position value from here:

TOP_LEFT: 1
TOP_CENTER: 2
TOP: 2
TOP_RIGHT: 3
LEFT_CENTER: 4
LEFT_TOP: 5
LEFT: 5
LEFT_BOTTOM: 6
RIGHT_TOP: 7
RIGHT: 7
RIGHT_CENTER: 8
RIGHT_BOTTOM: 9
BOTTOM_LEFT: 10
BOTTOM_CENTER: 11
BOTTOM: 11
BOTTOM_RIGHT: 12
CENTER: 13

and set position to the number value.

In AGM2.0 this will be addressed comprehensively