Как стилизовать Google Map Vue3?

Question

[Junior Development]

Подскажите, как применить стили к google map?

Использую эту библиотеку: https://vue-map.netlify.app/components/map.html

В документации описано, что стили применяются таким способом

<GMapMap
        :center="{lat: 51.093048, lng: 6.842120}"
        :zoom="7"
        :style="mapStyles"
    />

Далее я прописываю стили:

export default {
  name: 'Map',
  data() {
    return {
      mapStyles: {
        styles: [
          {elementType: 'geometry', stylers: [{color: '#d59563'}]},
          {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
          {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
          {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{color: '#263c3f'}]
          },
...

Но что-то явно делаю не так, стили не применяются.
Помогите разобраться.
Спасибо!

Answer 1

[0xD34F]

:style="mapStyles"

data() {
  return {
    mapStyles: {
      styles: [

Во-первых - не очень понятно, откуда вы взяли, что стили должны быть объектом, содержащим свойство styles. В документации есть ссылка на конструктор стилей - он выдаёт просто массив, без обёртки в виде объекта.

Во-вторых - компонент карты не имеет параметра style. То есть, документация врёт. Да, так бывает. Зато есть параметр options, частью которого стили и являются. Так что вам следует заменить

mapStyles: { на options: {

:style="mapStyles" на :options="options"

Ну и ещё стоит убедиться, что api key есть - без него стили применяться не хотят.

Comments

[Junior Development]

Спасибо добрый человек!
Очень помог!