Styling the LocalContextMapView

This section shows how to customize the visual appearance of your LocalContextMapView maps by applying custom map styles, and by customizing the appearance of map marker icons.

Applying custom map styles

You can customize the visual appearance of LocalContextMapView maps by applying custom styles. But note that LocalContextMapView comes with different default styles than a standard Map.

To completely override the LocalContextMapView default styles with custom styles (styles holds the custom styles array):

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

To build on top of the LocalContextMapView default styles with custom styles (styles):

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

Customizing marker icons

You can set the visual appearance of marker icons by customizing the pin color, glyph color, and scale (size). Do this when initializing the LocalContextMapView. You can set these values to a static object (icon styles do not change with state), or a dynamic function (icon styles change when an icon is highlighted or selected).

  • Custom styles are merged on top of default styles.
  • All CSS color syntaxes are supported including RGB, hexadecimal, HSL, and color keyword.
  • Scale is a numeric value, with a scale of 2 being twice as large as a scale of 1, and so on. By default, a pin has different scale values set for different states. Scale is absolute, so the value you pass in will not change the pin size relative to the default value, but rather overrides the default. For example, setting the scale to 1 for all states will make a pin the same size regardless of state.

Statically setting marker icon color and scale

You can set the default color and scale of marker icons and glyphs. To do this, specify color values for glyphColor and background, and a numeric value for scale in pinOptionsSetup. The following example sets the icons to black, the glyphs to white, and increases the scale to 2:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Dynamically setting marker icon color and scale

To set the default colors for marker icons and glyphs based on state (default, highlighted, or selected), use a conditional statement to set the desired values for each state. When the user mouses over a marker, isHighlighted becomes true. When the user clicks a marker, isSelected becomes true. When the place details view closes, marker icons revert to the default styling. The following example shows changing the marker icon style based on state:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Using Cloud-based maps styling with Local Context Beta

In order to use the Cloud-based maps styling in conjunction with Local Context Beta, take the following steps:

  1. Create a Map with a mapId and pass it to LocalContextMapView
  2. Turn off labels and icons for generic points of interest (POIs).
  3. Turn off a few elements in the inner Map options. These steps are optional.

Create a Map with a mapId and pass it to LocalContextMapView

To add a map using a Cloud-based maps styling ID, define the map element (including the ID and all inner Map options), and use this to initialize the LocalContextMapView, as shown in the following example:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Turn off labels and icons for generic POIs

To turn off labels and icons for generic POIs, take the following steps:

  1. Visit the Google Cloud Console, and select Map Styles to open the Map Styles screen.
  2. In your style configuration for Points of interest, set Visibility to Off for Labels and Icons.
  3. In your style configuration for Points of interest, set Visibility to On for Park Labels.

Set inner Map options (optional)

You may also want to set the following inner Map options in addition to any other inner Map options you have set, as shown here:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});