Customizing the Local Context Map

In this example, we apply custom map styling to the base map. This map looks at Waikiki in Hawaii and is styled with a tropical color scheme. We have also set maxPlaceCount to 18 to show more POIs.

Understand the code

Accessing the base map

The base map is accessible as the map property of a google.maps.localContext.LocalContextMapView object. This map is a regular google.maps.Map object and can be customized with all the parameters and methods available to that class. For example, you can add custom markers and event listeners.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});

localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

Applying custom styles

Since a google.maps.localContext.LocalContextMapView.map has default styles that differ from a standard Map, you can either choose to override the defaults or merge your custom style with the Local Context Library defaults. See Styling the Map for more detail.

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

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

Adding a custom marker

This example uses a hotel icon to distinguish the center point from the default red pin marker. Learn more about ways to customize a marker by modifying the label and icon properties of a Marker.

By default, these markers will appear below Local Context Library POI markers. To ensure that Local Context Library markers do not obscure the custom marker, set the zIndex property of the marker to a higher value than the maxPlaceCount.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon:
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});
index.ts

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon:
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});
index.js

Try the sample