# Base Map Styling - Google Maps

External business POIs from the base map can clutter up your map with irrelevant content. This article describes how to hide unwanted features from the base map - and how to change the colours to better match your branding guidelines.

<figure><img src="/files/o3ILwNjEYQSn4bgHwTQG" alt=""><figcaption><p>Use styling to control or hide visual features like the business POIs on the right hand side</p></figcaption></figure>

With Google Maps there are two methods to style the base map. Both style methods can be used across JavaScript, iOS and Android for a consistent look across platforms and apps.

**Google Maps Cloud Styling**

Cloud-based maps styling makes it easy to style, customize, and manage your maps using the Google Cloud Console, letting you create a customized map experience for your users without having to update your apps' code each time you make a style change.

***Warning - paid feature:** Functionality accessed by adding a `map ID` triggers a map load charged against the Dynamic Maps SKU for **Android** and **iOS**. See* [*Google Maps Billing*](https://developers.google.com/maps/billing-and-pricing/pricing#dynamic-maps) *for more information. Use of Cloud Styling with JavaScript does not add any additional cost.*

Follow the guidelines linked below to create a Style and associate it with a `map ID`.

{% embed url="<https://developers.google.com/maps/documentation/cloud-customization/overview>" %}
Feature documentation from Google Maps
{% endembed %}

To use a map ID with MapsIndoors, simply add the `mapId` parameter alongside other options in [GoogleMapsView](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.GoogleMapsView.html)

```javascript
// main.js

const mapViewOptions = {
  element: document.getElementById('map'),
  // your other map options here
  mapId: "8e0a97af9386fef",
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
```

\
**Google Maps JSON Style (legacy method)**

Use a JSON style declaration to control both colours and visual display of features like roads, parks and other points of interest. You can also hide features entirely.

The Styling Wizard can be an easy way to generate a JSON style:

{% embed url="<https://mapstyle.withgoogle.com/>" %}
Google Maps Styling Wizard (legacy)
{% endembed %}

To use a JSON style with MapsIndoors, simply add the styles array in [GoogleMapsView](https://app.mapsindoors.com/mapsindoors/js/sdk/latest/docs/mapsindoors.mapView.GoogleMapsView.html). Here is an example hiding all Google-supplied POIs:

```javascript
// main.js

const mapViewOptions = {
  element: document.getElementById('map'),
  // your other map options here
  styles: [
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
  ],
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mapsindoors.com/sdks-and-frameworks/web/map-visualization/base-map-styling-google-maps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.