CODEWITHSUNDEEP
angulargoogle-mapsangular-google-maps
Janith Widarshana
Janith Widarshana

Reputation: 3483

Angular 4 google map Full Control and Zoom Control positions and styling

I am using AGM - Angular Google Maps for my angular 4 application. I have setting up the control options as the documents. But they are not working. My code is as follows. HTML

[latitude]="lat" 
[longitude]="lng" 
[zoom]="zoom" 
[styles] = "styles"
[disableDefaultUI]="true"
[zoomControl]="true"
[scaleControl]="true"
[scaleControlOptions]="scaleControlOptions"
[zoomControlOptions]="zoomControlOptions"
[fullscreenControl]="true"
[fullscreenControlOptions]="fullscreenControlOptions"
[streetViewControl]="'false'"
[mapTypeControl]="'true'"
[mapTypeControlOptions]="mapTypeControlOptions"

Properties on the Ts

lat = 40;
lng = 40;
zoom = 2;

zoomControlOptions: ZoomControlOptions = {
    position: ControlPosition.LEFT_BOTTOM,
    style: ZoomControlStyle.LARGE
  };

 fullscreenControlOptions: FullscreenControlOptions = {
    position : ControlPosition.LEFT_BOTTOM
  };

  mapTypeControlOptions: MapTypeControlOptions = {
    mapTypeIds: [ MapTypeId.ROADMAP],
    position: ControlPosition.BOTTOM_LEFT,
  };

Styles json copied from https://mapstyle.withgoogle.com/. I need to have Full control and zoom control left down corner as follows with the custom styles..

enter image description here

Upvotes: 3

Views: 5804

Answers (2)

Abdul azeez VP
Abdul azeez VP

Reputation: 185

for angular 13 and agm-core version 1.1.0

1.inside component.html

<agm-map  [zoomControlOptions] = "{position: zoomPosition}" [latitude]="mapData.latitude" [longitude]="mapData.longitude" [zoom]="11"></agm-map>

2.in component.ts

import { ControlPosition } from '@agm/core';

zoomPosition = ControlPosition.TOP_RIGHT

Upvotes: 3

Maksim
Maksim

Reputation: 79

You should use mapReady event and SetOptions method.

<agm-map
    ...
    (mapReady)="onMapReady($event)">

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

Here is the solution: https://github.com/SebastianM/angular-google-maps/issues/1308

Upvotes: 3

Related Questions