How to change mapType control position ?

[khaledtag98]

I need to change the position of mapType buttons on the map view.

There is a solution in google maps API:

mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },

but I don't know how to implement it using this library

any help ?

[HusamElbashir]

Unfortunately the API isn't available prior to the map's initialization so you can't use that. I looked up ControlPosition on DefinitelyTyped and luckily it looks like the position values are just integers: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/google.maps/index.d.ts#L282-L338

So something like this should work:

<GoogleMap
  api-key="YOUR_GOOGLE_API_KEY"
  style="width: 100%; height: width: 100%"
  :center="center"
  :zoom="11"
  :map-type-control-options="{ position: 8 }"
/>

You'll have to experiment a bit though as it looks like the values on DefinitelyTyped aren't accurate in terms of positioning.

[khaledtag98]

Thank you so much it is working

[vesper8]

I'm trying to do something similar but I'm trying to change the position of the zoom control. I've been able to do this with no issues using other libraries, but with this one it seems no matter what I do, the zoom control (+ and - buttons) are always positioned in the bottom right corner

I've tried

  :zoom-control="true"
  :zoom-control-options="{ position: 9 }"

And I tried positions from 1 to 11, and nothing seems to make any difference.

Any ideas what I'm doing wrong?

[HusamElbashir]

@vesper8 Agreed there's an inconsistency in the API in that area. The other controls allow you to set the position directly. For example:

zoom-control-position="LEFT_BOTTOM"

It made sense to pass the position directly for the other controls because their options interface only has a position property (for example ZoomControlOptions). Unfortunately I couldn't do the same for the mapType control because MapTypeControlOptions has other properties.