New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Merubah Style Maps Pada Google Maps


Saturday, 2 July 2016
Merubah Style Maps Pada Google Maps
Gambar 1
Google maps menyediakan banyak tipe atau jenis maps untuk ditampilkan yaitu satelite maps, road maps, hybrid maps, dan tetrain, dan yang bisa di gunakan adalah road maps. Masing masing tipe maps memiliki gayanya sendiri. Dalam hal ini saya tidak akan menjelaskan mengenai jenis-jenis dari maps itu sendiri. Sebelum lebih jauh dalam membuat style pada google maps, lebih baik kita mengenal dasarnya terlebih dahulu. Sejatinya dalam membuat style pada maps hanya mengandalkan pewarnaan dan pencahayaan. Berikut adalah keterangan yang harus kita pahami dalam pembuatan style pada maps.
  1. Hue adalah jenis warna RGB yang diacukan sebagai warna dasar.
  2. 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.
  3. Saturation adalah penunjukan persentase perubahan intensitas warna dasar yang diterapkan pada elemen dan nilai saturation antara -100 sampai 100.
  4. Gamma adalah nilai kontras yang akan diterapkan pada elemen maps, nilai gamma antara 0.01 sampai 10.0.
  5. Invert lightness adalah merubah pencahayaan dari kondisi terang ke gelap dan bersifat boolean.
  6. Visibility menunjukan bagaimana style muncul didalam maps.
  7. Color adalah warna untuk fitur yang diterapkan.
  8. Weight adalah ukuran besar dari fitur yang telah ditetapkan.
Css
<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 Sc Developer - MAPS
Selain itu kita dapat menggunakan banyak style dengan menggunakan fungsi array dalam bentuk JSON. Sebagai contoh perhatikan kode berikut.
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.
Share This :
Hady Eka Saputra