2

using react-google-maps, my following option for changing the position of zoom is not working

<GoogleMap
defaultZoom={5}
defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }}
options={{
  gestureHandling:'greedy',
  zoomControlOptions:'TOP_RIGHT',
  streetViewControl:false,
  fullscreenControl:false,
}}

>

Gaurav Kumar
  • 1,111
  • 6
  • 25
  • 52

1 Answers1

2

zoomControlOptions prop shape from react-google-maps type definitions (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/googlemaps/index.d.ts):

  /** Options for the rendering of the zoom control. */
  export interface ZoomControlOptions {
    /**
     * Position id. Used to specify the position of the control on the map.
     * The default position is TOP_LEFT.
     */
    position?: ControlPosition;
    style?: ZoomControlStyle;
  }

export enum ControlPosition {
  BOTTOM_CENTER,
  BOTTOM_LEFT,
  BOTTOM_RIGHT,
  LEFT_BOTTOM,
  LEFT_CENTER,
  LEFT_TOP,
  RIGHT_BOTTOM,
  RIGHT_CENTER,
  RIGHT_TOP,
  TOP_CENTER,
  TOP_LEFT,
  TOP_RIGHT
}

This should work:

<GoogleMap
  defaultZoom={5}
  defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }}
  options={{
    gestureHandling:'greedy',
    zoomControlOptions: { position: 9 },
    streetViewControl:false,
    fullscreenControl:false,
  }}
>

google.maps.ControlPosition.TOP_CENTER has value of 9

Honza
  • 683
  • 7
  • 22
  • Somethings wrong mate. it made control disappear. No error though. should it be `google.maps.ControlPosition.TOP_CENTER` like this but, then it shows error as google not defined. – Gaurav Kumar May 20 '19 at 15:36
  • It depends whether or not you're using Typescript - `google.maps.ControlPosition` is an exported enum which has numeric values I should edit my answer then :) – Honza May 20 '19 at 15:59
  • https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/googlemaps/index.d.ts – Honza May 21 '19 at 08:09
  • then, how come this isn't working as position https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/googlemaps/index.d.ts#L360 – Gaurav Kumar May 21 '19 at 08:31
  • It is - it's an enum as well, but different formatting and no comments – Honza May 21 '19 at 08:51