Jin Toples Programming

Cara Menggati Style Map Google Maps - Kali ini kami akan menjelaskan cara mengganti Style Map Google Maps. Dengan menggunakan API Google Maps anda dapat menggati syle tampilan dari google maps pada peta yang anda buat, sebagai contoh anda ingin mengganti warna garis jalan, warna background dataran, mengganti warna jalur kereta, mengganti background warna laut, dll kita dapat custom sendiri warnanya sesuai ke inginan. untuk lebih jelasnya langsung saja ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama style_map.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Mengganti Style Map Google Maps</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      #address {
   height: 25px;
   padding: 2px;
   width: 400px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #map-canvas { height: 400px; width:100%; }
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-6.187931, 107.031279);

    var roadAtlasStyles = [
   {
     featureType: 'road.highway',
     elementType: 'geometry',
     stylers: [
    { hue: '#ff0022' },
    { saturation: 60 },
    { lightness: -20 }
     ]
   },{
     featureType: 'road.arterial',
     elementType: 'all',
     stylers: [
    { hue: '#2200ff' },
    { lightness: -40 },
    { visibility: 'simplified' },
    { saturation: 30 }
     ]
   },{
     featureType: 'road.local',
     elementType: 'all',
     stylers: [
    { hue: '#f6ff00' },
    { saturation: 50 },
    { gamma: 0.7 },
    { visibility: 'simplified' }
     ]
   },{
     featureType: 'water',
     elementType: 'geometry',
     stylers: [
    { saturation: 40 },
    { lightness: 40 }
     ]
   },{
     featureType: 'road.highway',
     elementType: 'labels',
     stylers: [
    { visibility: 'on' },
    { saturation: 98 }
     ]
   },{
     featureType: 'administrative.locality',
     elementType: 'labels',
     stylers: [
    { hue: '#0022ff' },
    { saturation: 50 },
    { lightness: -10 },
    { gamma: 0.90 }
     ]
   },{
     featureType: 'transit.line',
     elementType: 'geometry',
     stylers: [
    { hue: '#ff0000' },
    { visibility: 'on' },
    { lightness: -70 }
     ]
   }
    ];

    var mapOptions = {
   zoom: 12,
   center: latlng,
   mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
   }
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);

    var styledMapOptions = {
   name: 'Bekasi'
    };

    var usRoadMapType = new google.maps.StyledMapType(
     roadAtlasStyles, styledMapOptions);

    map.mapTypes.set('usroadatlas', usRoadMapType);
    map.setMapTypeId('usroadatlas');
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
     });
   } else {
     alert('Geocode was not successful for the following reason: ' + status);
   }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Mengganti Style Map Google Maps</h1>
  <div id="panel">
    <input id="address" type="textbox" value="Kebalen, bekasi">
    <input id="btn" type="button" value="Search" onclick="codeAddress()">
  </div>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div>
  </body>
</html>

Perhatikan baris kode :

 var roadAtlasStyles = [
   {
     featureType: 'road.highway',
     elementType: 'geometry',
     stylers: [
    { hue: '#ff0022' },
    { saturation: 60 },
    { lightness: -20 }
     ]
   }

Var riadAtlasStyles berisi array custom style dari map yang kita inginkan.

fetureType : elemen yang ingin di ubah dalam peta seperti jalan, air, jalur kereta dll.

stylers : settingan warna style

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Style Map Google Maps di sini : CEK TKP

Menggati Style Map Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.