Dalam contoh ini, kami menerapkan gaya visual peta kustom ke peta dasar. Peta ini melihat Waikiki di Hawaii dan diberi gaya dengan skema warna tropis. Kami juga telah menetapkan maxPlaceCount ke 18 untuk menampilkan lebih banyak POI.
/*
* 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>
Peta dasar dapat diakses sebagai properti map dari objek google.maps.localContext.LocalContextMapView. Peta ini adalah objek google.maps.Map biasa dan dapat disesuaikan dengan semua parameter dan metode yang tersedia untuk class tersebut. Misalnya, Anda dapat menambahkan penanda kustom dan pemroses peristiwa.
var marker = new google.maps.Marker({position: center, map: localContextMapView.map});
Karena google.maps.localContext.LocalContextMapView.map memiliki gaya default
yang berbeda dari Map standar, Anda dapat memilih untuk mengganti gaya default atau menggabungkan gaya kustom dengan default Library Konteks Lokal. Lihat Menata Gaya Peta untuk mengetahui detail selengkapnya.
Untuk menimpa gaya default LocalContextMapView dengan gaya kustom
(stylesArray):
Contoh ini menggunakan ikon hotel untuk membedakan titik tengah dengan penanda pin merah default. Pelajari lebih lanjut cara
menyesuaikan penanda
dengan mengubah properti label dan icon dari Marker.
Secara default, penanda ini akan muncul di bawah penanda POI Library Konteks Lokal. Untuk memastikan penanda Library Konteks Lokal tidak mengaburkan penanda kustom, tetapkan properti zIndex penanda ke nilai yang lebih tinggi daripada 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,
});