You can use map styling to hide features on the map. Select an option in this
example to hide or show business points of interest (POIs) and public transit
icons on the map.
> [!NOTE]
> **Note:** A map's styles property can only be set on a raster map.
Read the [documentation](https://developers.google.com/maps/documentation/javascript/styling).
### TypeScript
```typescript
async function init() {
// Request needed libraries.
await google.maps.importLibrary('maps');
// Get the gmp-map element.
const mapElement = document.querySelector('gmp-map')!;
// Get the inner map.
const innerMap = mapElement.innerMap;
innerMap.setOptions({
mapTypeControl: false,
// A map's styles property can only be set on a raster map.
renderingType: 'RASTER',
});
// Apply new JSON when the user chooses to hide/show features.
document.getElementById('hide-poi')!.addEventListener('click', () => {
innerMap.setOptions({ styles: styles.hide });
});
document.getElementById('show-poi')!.addEventListener('click', () => {
innerMap.setOptions({ styles: styles.default });
});
}
const styles: Record = {
default: [],
hide: [
{
featureType: 'poi.business',
stylers: [{ visibility: 'off' }],
},
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{ visibility: 'off' }],
},
],
};
void init();
```
### JavaScript
```javascript
async function init() {
// Request needed libraries.
await google.maps.importLibrary('maps');
// Get the gmp-map element.
const mapElement = document.querySelector('gmp-map');
// Get the inner map.
const innerMap = mapElement.innerMap;
innerMap.setOptions({
mapTypeControl: false,
// A map's styles property can only be set on a raster map.
renderingType: 'RASTER',
});
// Apply new JSON when the user chooses to hide/show features.
document.getElementById('hide-poi').addEventListener('click', () => {
innerMap.setOptions({ styles: styles.hide });
});
document.getElementById('show-poi').addEventListener('click', () => {
innerMap.setOptions({ styles: styles.default });
});
}
const styles = {
default: [],
hide: [
{
featureType: 'poi.business',
stylers: [{ visibility: 'off' }],
},
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{ visibility: 'off' }],
},
],
};
void init();
```
### CSS
```css
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.map-control {
background-color: #fff;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin: 10px;
padding: 5px;
font-family: Roboto, sans-serif;
font-size: small;
display: block;
}
.selector-control {
font-size: 14px;
line-height: 30px;
vertical-align: baseline;
}
```
### HTML
```html
Hiding Map Features With Styling
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/hiding-features/jsfiddle)
### Clone Sample
Git and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
to install Node.js and NPM. You will also need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt).
The following commands clone the repository, install dependencies, and copy the environment file.
```javascript
git clone https://github.com/googlemaps-samples/js-api-samples.git
cd js-api-samples
npm i
cp .env.template .env
```
Once you copy the environment file, make sure to open the `.env` file and replace `` with your actual API key before starting the sample.
```javascript
cd samples/hiding-features
npm start
```