![]() |
Gambar 1 |
- Hue adalah jenis warna RGB yang diacukan sebagai warna dasar.
- Lightness adalah kecerahan dari elemen dan di hitung menggunakan persentase antara -100 sampai 100. Dalam hal ini nilai negatif meningkatkan tingkat kegelapan elemen dan sedangkan nilai positif adalah nilai kecerahan.
- Saturation adalah penunjukan persentase perubahan intensitas warna dasar yang diterapkan pada elemen dan nilai saturation antara -100 sampai 100.
- Gamma adalah nilai kontras yang akan diterapkan pada elemen maps, nilai gamma antara 0.01 sampai 10.0.
- Invert lightness adalah merubah pencahayaan dari kondisi terang ke gelap dan bersifat boolean.
- Visibility menunjukan bagaimana style muncul didalam maps.
- Color adalah warna untuk fitur yang diterapkan.
- Weight adalah ukuran besar dari fitur yang telah ditetapkan.
Css
Java Script
Html
Java Sc Developer - MAPS
Selain itu kita dapat menggunakan banyak style dengan menggunakan fungsi array dalam bentuk JSON. Sebagai contoh perhatikan kode berikut.<style type="text/css">
#map1 , #map2 {
width:400px;
height: 300px;
}
</style>
Java Script
<script type="text/javascript">
function initMap() {
var map1,map2;
var styleGMaps = [
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" },
{ "invert_lightness": true },
{ "gamma": 1.96 },
{ "lightness": -65 },
{ "saturation": 53 },
{ "color": "#55b047" },
{ "weight": 0.4 },
{ "hue": "#00e5ff" }
]
}
];
var styled = new google.maps.StyledMapType(styleGMaps,
{name: "Styled Map"});
var mapOptions = {
center: {lat: 0.5163256, lng: 101.4437629},
zoom: 14,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var mapAwal = {
center: {lat: 0.5163256, lng: 101.4437629},
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(document.getElementById('map1'),mapOptions);
map1.mapTypes.set('map_style', styled);
map1.setMapTypeId('map_style');
map2 = new google.maps.Map(document.getElementById('map2'),mapAwal);
}
</script>
Html
<body>
<div id="map1"></div>
<div id="map2"></div>
</body>
Maka akan menghasilkan output seperti dibawah, dengan yang sebelah kanan adalah maps default sebelum disisipi style.
| |
Java Script
<script type="text/javascript">
function initMap() {
var map1,map2;
var styleGMaps = [
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" },
{ "invert_lightness": true },
{ "gamma": 1.96 },
{ "lightness": -65 },
{ "saturation": 53 },
{ "hue": "#00e5ff" },
{ "weight": 0.2 },
{ "color": "#dd6630" }
]
},{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "invert_lightness": true },
{ "lightness": 33 },
{ "gamma": 0.84 },
{ "hue": "#0008ff" },
{ "visibility": "on" },
{ "saturation": 38 },
{ "weight": 2.2 },
{ "color": "#4f90f4" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "invert_lightness": true },
{ "color": "#ffb147" },
{ "saturation": 23 },
{ "hue": "#ff9100" },
{ "lightness": -30 },
{ "gamma": 4.09 },
{ "weight": 2.1 }
]
},{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "lightness": -14 },
{ "color": "#5cae8e" },
{ "weight": 0.4 },
{ "saturation": 34 },
{ "gamma": 1.42 }
]
}
];
var styled = new google.maps.StyledMapType(styleGMaps,
{name: "Styled Map"});
var mapOptions = {
center: {lat: 0.5163256, lng: 101.4437629},
zoom:12,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var mapAwal = {
center: {lat: 0.5163256, lng: 101.4437629},
zoom: 12 ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(document.getElementById('map1'),mapOptions);
map1.mapTypes.set('map_style', styled);
map1.setMapTypeId('map_style');
map2 = new google.maps.Map(document.getElementById('map2'),mapAwal);
}
</script>
Gunakan css dan tag html yang sama dengan contoh sebelumnya. Untuk hasil contoh kedua ini anda dapat melihat di link berikut :
Akan lebih mudah apabila anda membuat style dengan Styled Maps Wizard.