Using disableDefaultUI with TypeScript TSX-CodePudding

I'm using Vue 2 and TypeScript and I'm trying to disable the default controls being shown on <gmap-map> and I think while using JSX/TSX the syntax differs. I've tried everything I could think of but can't get the disableDefaultUI property to change anything. It's not that it gives me an error, just that it changes nothing.

This is the main thing I've been trying to get work, as this is how it would work in any other situation:

<gmap-map
 center={this.center}
 zoom={12}
 onClick={this.onMapClickHandler}
 class={styles.setup__map}
 disableDefaultUI = {'true'}
>

I've tried with & without the curly brackets and even tried disabling the controls with their individual names like mapTypeControl = 'false' etc.

Or when I try adding it to an options block like in the following, it doesn't recognize the inner disableDefaultUI property and gives an error.

<gmap-map
 center={this.center}
 zoom={12}
 onClick={this.onMapClickHandler}
 class={styles.setup__map}
 options = {
    disableDefaultUI = {'false'}
  }
>

I've tried declaring a boolean separately as well outside my main render() but that, as expected, gives the same result.

I'm on a very large shared repo where I can't tell if these properties are listed anywhere, and upon searching through it, it's not, other than in a separate .js file. The other known <gmap-map> properties like zoom={} or center={} work perfectly fine.

This is what's in the separate .js file

$googleMap.each(function () {
  var mapHeight = $(this).data('height'),
  address = $(this).data('address'),
  zoom = $(this).data('zoom'),
  controls = $(this).data('disable-controls'),

[...]

    $(this).gmap3({
    map: {
         options: {
         zoom: zoom,
         disableDefaultUI: controls,
         scrollwheel: scrollwheel,
         styles: styles
       }
  }

Am I missing something? Is it a syntax issue? Or should I be making a separate function for disabling default UI when it's TSX?

Any help is much appreciated, thanks.

CodePudding user response：

Answering my question in case anyone needs it: I've found not a solution - these are one of those times that TSX can be a pain -, but a work-around. Adding this to a Global.scss file does the trick:

.vue-map-container {
  .vue-map {
    height: 100%;
  }
  .gm-control-active {
    display: none;
  }
  .gm-svpc {
    display: none;
  }
  .gmnoprint {
    display: none;
  }
}