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.
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Local Context Styles</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
defer
></script>
</body>
</html>
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});
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):
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,
});
// 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,
});