I'm currently working on a vue2 project with google maps 3.54 (latest version), this is required to use this version because of advancedMarkers.

=${this.mapKey}&callback=isMapLoad&libraries=marker&v=3.54

I read all the documentation about styling a map, and i have done it before on other version. But i do not find the way ir.

I try to set a style on the init:

this.map = new google.maps.Map(document.getElementById('map'), {
  mapId: 'GMAP_ID',
  language: this.$i18n.locale,
  center: this.defaultCoords,
  zoom: this.zoom,
  styles: [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
})

Or after the init with:

const styledMapType = new google.maps.StyledMapType(
 [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
)
this.map.mapTypes.set('styled_map', styledMapType)
this.map.setMapTypeId('styled_map')

// i have added to my script url the libraries maps to have StyledMapType

I got no error, but nothing change in both cases. What can i try?

UPDATE

There is a working example of the trouble: /

If you remove the mapId like in the example, the style is apply, but in that case the markers doesn't work anymore.

If you add the mapid, the advanced markers is display, but the styles not apply.

I want both, it's mandatory too used advanced markers and styles without the cloud but legacy styles.

I'm currently working on a vue2 project with google maps 3.54 (latest version), this is required to use this version because of advancedMarkers.

https://maps.googleapis./maps/api/js?key=${this.mapKey}&callback=isMapLoad&libraries=marker&v=3.54

I read all the documentation about styling a map, and i have done it before on other version. But i do not find the way ir.

I try to set a style on the init:

this.map = new google.maps.Map(document.getElementById('map'), {
  mapId: 'GMAP_ID',
  language: this.$i18n.locale,
  center: this.defaultCoords,
  zoom: this.zoom,
  styles: [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
})

Or after the init with:

const styledMapType = new google.maps.StyledMapType(
 [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
)
this.map.mapTypes.set('styled_map', styledMapType)
this.map.setMapTypeId('styled_map')

// i have added to my script url the libraries maps to have StyledMapType

I got no error, but nothing change in both cases. What can i try?

UPDATE

There is a working example of the trouble: https://jsfiddle/981w4zxb/1/

If you remove the mapId like in the example, the style is apply, but in that case the markers doesn't work anymore.

If you add the mapid, the advanced markers is display, but the styles not apply.

I want both, it's mandatory too used advanced markers and styles without the cloud but legacy styles.

• javascript
• vue.js
• google-maps
• maps

• I think it should be MapTypeStyle and not StyleMapType. Please see: developers.google./maps/documentation/javascript/reference/… – Yrll Commented Sep 19, 2023 at 0:30
• Thanks, but it appear to not exist on the map object. But i found something if i remove the mapId i can see that the map style change with setOption({styles})! So, how can i change the mapStyle using a mapId? – Raphael Rlt Commented Sep 19, 2023 at 7:40
• 1 @RaphaelRlt unfortunately, you can't. You'll have to reinitialize the map. More info here in my handbook on Google Maps. – Joe - Check out my books Commented Sep 19, 2023 at 13:18
• @Yrll: not quite. You'd pass MapTypeStyle to the StyleMapType constructor - so the OP did it right: developers.google./maps/documentation/javascript/reference/… – Joe - Check out my books Commented Sep 19, 2023 at 13:22

2 Answers 2

It is currently not possible to upload or import JSON from Google Map Console/Platform for custom styling of Google Maps.

But it is possible to add custom styles from the code end. I have also tried this in an Angular project.

Working Code -

import { Loader } from '@googlemaps/js-api-loader';

ngOnInit(): void {
  const loader = new Loader({
    apiKey: API_KEY,
    version: 'weekly'
  });

  loader.importLibrary('maps').then(() => {
    void this.initMap();
  }).catch((error: Error) => {
    console.error(`Error loading Google Maps API: ${error.message}`);
  });
}

async initMap(): Promise <void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapOptions = {
    zoom: 7,
    center: {
      lat: 22.5744,
      lng: 88.3629
    },
  };

  const map = new Map(document.getElementById('map'), mapOptions);

  const styledMapType = new google.maps.StyledMapType(
    [
      {
        featureType: 'water',
        elementType: 'all',
        stylers: [
          {
            color: '#f40000',
          },
          {
            visibility: 'on',
          },
        ],
      }
    ]
  );
  this.map.mapTypes.set('styled_map', styledMapType);
  this.map.setMapTypeId('styled_map');
}

Output -

Google map package version -

"@angular/core": "^17.2.0",
"@angular/google-maps": "^17.2.0",
"@googlemaps/js-api-loader": "^1.16.6",
"@googlemaps/markerclusterer": "^2.5.3",

Not sure about how it is with Vue but your code looks correct – with or without &v=3.54.

The thing is, if you instantiate your map with a mapId, the styles attribute in the constructor will not override the map's appearance.

So, if you don't have cloud styling associated with your mapId, remove it from the constructor. Your styles should apply right away. And I suspect this.map.setMapTypeId(...) will take effect too.

UPDATE

You cannot use mapIds and styles at the same time. When you do, you'll get the warning:

A Map's styles property cannot be set when a mapId is present. When a mapId is present, Map styles are controlled via the cloud console. Please see documentation at https://developers.google./maps/documentation/javascript/styling#cloud_tooling

Given that your style definitions are stored in a DB, you'll likely need to create individual mapIds and their associated cloud style…

Alternatively, you can reconsider your usage of Advanced Markers. Here's a guide to explore alternatives. Dislaimer: I wrote the guide.

Finally, you might want to keep an eye on the gcloud cli which might, at some future point, let you programmatically create mapIds and styles -- just like Google did for API Keys.