стилизовать карту Google в проекте vue.js

Question

У меня есть простой проект Vue с Google Maps .

Карты Google, которые я включаю, используя vue2-google-maps

Я пытаюсь создать стилизованную карту, например эту карту оттенков серого .

Так что в options я использую styles:

export default {
  name: "GoogleMap",
  data() {
    return {
      options: {
        center: {
          lat: 47.376332,
          lng: 8.547511
        },
        zoom: 15,
        styles: [
          {
            featureType: "all",
            elementType: "labels.text.fill",
            styles: [
              {
                saturation: 36
              },
              {
                color: "#000000"
              },
              {
                lightness: 40
              }
            ]
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: [
              {
                visibility: "on"
              },
              {
                color: "#000000"
              },
              {
                lightness: 16
              }
            ]
          },....
        ]
      }, ...

Но что-то не так. Я видел эту возможность подключения стилей в других вопросах на стеке и github.

Вопрос: Как стилизовать карту Google в проекте vue.js?

Answer 1

Вам необходимо указать имя реквизита options для компонента gmap-map:

<gmap-map id="map" v-bind:options="options" style="width: 100%; height: 500px">
  ...
</gmap-map>