How to hide POI labels?

[Zyles]

How can we hide POI labels on the map using the cloud mapid and styles format?

The old way works but get warnings in console about migrating to the new 2024 way.

But I can't find a way to hide the POI labels on the map.

[chama-x]

You can hide POI labels using the new map styles approach. In your mapId config, you'll want to modify the style for the POI labels feature:

<APIProvider apiKey={...} onLoad={() => console.log('Maps API loaded')}>
  <Map
    defaultCenter={{lat: 40, lng: -100}}
    defaultZoom={10}
    mapId="YOUR_MAP_ID"
  />
</APIProvider>

Then in your Google Cloud console where you defined the mapId, go to the map style settings and under the POI layer, set the label visibility to "off". You can do this via the style editor UI or programmatically.

If you want to do it via code instead of the console, you can pass a styles array to the Map component:

const poiLabelStyle = [
  {
    featureType: "poi",
    elementType: "labels",
    stylers: [{visibility: "off"}]
  }
];

<Map styles={poiLabelStyle} ... />

This should work with the new 2024 approach without console warnings. The mapId approach handles it cleaner though if you set it up in the cloud console once.