How to hide Google map details when using gmap-vue - vuejs2

Question

I have a Vue application and am using gmap-vue to show information onf Google maps. I want to hide the POI markers on the map. I found out that you have to do that by changing the style, but I can't make it work with gmap-vue. Who can give me a hint?
The relevant part of my Vue app:
<template>
<div class="flex-container">
<gmap-map
:center="marker"
:zoom="13"
ref="map"
:options="mapOptions"
class="map-container"
>
<gmap-marker
:position="marker"
icon="/images/iesmenke-vrijgemaakt-klein.png"
title="De ijskar van de IJsmannetjes"
>
</gmap-marker>
</gmap-map>
</div>
</template>
<script>
export default {
props: ["area"],
data() {
return {
marker: {
lat: 51.33,
lng: 6.14,
},
id: null,
delay: 600000, //Ophalen nieuwe positie iedere 600 seconden
ijskarlogo: {
url: "/images/iesmenke-vrijgemaakt.png",
},
mapOptions: {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true,
disableDefaultUi: false,
clickableIcons: false,
styles: {
hide: [
{
featureType: "poi.business",
stylers: [{ visibility: "off" }],
},
],
},
},
};
},

Answer 1

What I did is using the $mapPromise function to directly access map, like in the example.
this.$refs.map.$mapPromise.then((map) => {
map.setOptions({
styles: [
{
featureType: 'poi.business',
stylers: [{ visibility: 'off' }],
},
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{ visibility: 'off' }],
},
]
})
})