Cara Membuat Style Maps Menggunakan Styling Wizard

Dalam pembuatan peta dengan google maps, kita telah disuguhkan dengan beberapa gaya (style) utama dari google maps seperti satelite dan tetrain. Dalam kasus lain sebagai developer mungkin dengan tampilan yang sangat standar tersebut tidak menjual produknya ke luar. Sehingga dibutuhkan beberapa strategi dan salah satunya adalah membuat tampilan dari peta tersebut terlihat menarik dan tidak membosankan. Google sendiri sudah memiliki layanan dalam pengaturan gaya dari google maps yaitu Styling Wizard. Dengan menggunakan Styling Wizard kita dapat melakukan kostum tapilan dari peta sesuai dengan keinginan sendiri. Styling Wizard menyimpan seluluh pengaturan dalam bentuk JSON, sehingga sangat ringan untuk di load kedalam peta google.

Untuk menggunakan Styling Wizard kita cukup mengakses link berikut.

https://mapstyle.withgoogle.com/

Gambar 1

Untuk membuat style baru kita bisa memilih tombol Create A Style.

Gambar 2

 Selanjutnya kita bisa gunakan form pencarian untuk mencari lokasi yang akan kita cocokan dengan style yang di gunakan nantinya. Dalam kasus ini saya masih tetap menggunakan Kota Pekanbaru dalam styling peta.

Gambar 3

Lihat pada menu bagian kiri, terdapat beberapa tema pada peta, dan saya lebih memilih peta Aubergine. Ada juga pengaturan kekontrasan dari komponen pada peta seperti Roads (jalan), Landmarks (area yang di tandai) dan Label (penamaan tempat). Kita dapat mengubah style lebih baik lagi dengan menggunakan menu More Options, dan anda akan disuguhi setingan untuk mengkostum tampilan tiap-tiap komponen seperti bentuk administrasi dari wilayah, pemandangan dan wilayah genangan air. Untuk menyudahi dan melihat kode JSON dari tempalte yang kita desain bisa klik tombol Finish.

Gambar 4

Dari gambar diatas anda dapat implementasikan gaya tersebut pada peta, anda dapat melihat tutorial berikut :  Merubah Style Pada Google Maps. Dimana meletakan style tadi, anda cukup ubah data pada baris kode 

      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" }
          ]
        }
      ];

sehingga menjadi seperti berikut dalam contoh tema yang saya desain tadi.

      var styleGMaps =
[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8ec3b9"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1a3646"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#64779e"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#4b6878"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#334e87"
      }
    ]
  },
  {
    "featureType": "landscape.natural",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6f9ba5"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3C7680"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#304a7d"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2c6675"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#255763"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#b0d5ce"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#023e58"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#98a5be"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1d2c4d"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#283d6a"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3a4762"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#0e1626"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#4e6d70"
      }
    ]
  }
]

Jadi untuk mendapatkan hasil yang lebih baik lagi anda diharapkan menggunakan imajinasi yang cukup baik.