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, });
JavaScript
// Merge map styles. const mergedStyles = map.get("styles").concat(styles); map.setOptions({ center: center, zoom: 14, styles: mergedStyles, });
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:
- Create a
Map
with amapId
and pass it toLocalContextMapView
- Turn off labels and icons for generic points of interest (POIs).
- 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:
- Visit the Google Cloud Console, and select Map Styles to open the Map Styles screen.
- In your style configuration for Points of interest, set Visibility to Off for Labels and Icons.
- 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,
});