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;
}
<!DOCTYPE html>
<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 src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
async
></script>
</body>
</html>
/* 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;
}
<!DOCTYPE html>
<html>
<head>
<title>Local Context Styles</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=localContext&v=beta"
async
></script>
</body>
</html>
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});
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,
});
