Untuk menggunakan Google Maps dalam mode "default" tanpa pin bawaan (seperti tempat bisnis, transportasi umum, dan landmark), Anda dapat menggunakan opsi styles pada peta untuk menyembunyikan elemen-elemen tersebut. Berikut adalah cara melakukannya:
gunakan fitur styles pada google maps dengan mengatur berbagai element pada peta untuk disembunyikan, termaksud pin atau icon tempat bawaan google
buat array
styles
, array ini untuk mengatur tipe element peta yang akan disembunyikan
initialitasikan
styles
kedalam peta.
terkahir kita membutuhkan api key, agar fitur tersebut dapat digunakan
Berikut contoh kode :
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Clean Mode</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
// Array styles untuk menghilangkan pin default
var mapStyles = [
{
featureType: "poi",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "poi.business",
stylers: [{ visibility: "off" }],
},
{
featureType: "poi.park",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "road",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
];
// Membuat peta dengan styles
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -25.344, lng: 131.036 },
zoom: 4,
styles: mapStyles, // Menerapkan styles pada peta
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="height: 400px; width: 100%;"></div>
</body>
</html>
Selamat mencoba … : )
