Edit in JSFiddle

<!DOCTYPE html>
<html>
  <head>
    <title>TipsNote 地図カスタマイズt</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #sample {
        width: 700px;
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div id="sample"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('sample'), {
          center: {
            lat: 34.70194,
            lng: 135.510025
          },
          zoom: 18,
          styles: [
            // ここに書き出されたJSONをペースト
            {
              "elementType": "geometry",
              "stylers": [{
                "color": "#e9f5f3"
              }]
            },
            {
              "elementType": "labels.icon",
              "stylers": [{
                "visibility": "off"
              }]
            },
            {
              "elementType": "labels.text.fill",
              "stylers": [{
                "color": "#616161"
              }]
            },
            {
              "elementType": "labels.text.stroke",
              "stylers": [{
                "color": "#f5f5f5"
              }]
            },
            {
              "featureType": "administrative.locality",
              "stylers": [{
                "visibility": "off"
              }]
            },
            {
              "featureType": "poi",
              "elementType": "geometry",
              "stylers": [{
                "color": "#eeeeee"
              }]
            },
            {
              "featureType": "poi",
              "elementType": "labels.text.fill",
              "stylers": [{
                "color": "#757575"
              }]
            },
            {
              "featureType": "poi.business",
              "elementType": "geometry",
              "stylers": [{
                "visibility": "off"
              }]
            },
            {
              "featureType": "poi.business",
              "elementType": "labels",
              "stylers": [{
                "visibility": "simplified"
              }]
            },
            {
              "featureType": "poi.business",
              "elementType": "labels.icon",
              "stylers": [{
                "visibility": "simplified"
              }]
            },
            {
              "featureType": "poi.park",
              "stylers": [{
                "visibility": "simplified"
              }]
            },
            {
              "featureType": "poi.park",
              "elementType": "geometry",
              "stylers": [{
                "color": "#bde3c7"
              }]
            },
            {
              "featureType": "poi.park",
              "elementType": "labels.text.fill",
              "stylers": [{
                "visibility": "simplified"
              }]
            },
            {
              "featureType": "poi.park",
              "elementType": "labels.text.stroke",
              "stylers": [{
                  "color": "#bffcff"
                },
                {
                  "saturation": -25
                },
                {
                  "visibility": "simplified"
                },
                {
                  "weight": 4.5
                }
              ]
            },
            {
              "featureType": "road",
              "elementType": "geometry",
              "stylers": [{
                "color": "#ffffff"
              }]
            },
            {
              "featureType": "road.arterial",
              "elementType": "labels",
              "stylers": [{
                "visibility": "off"
              }]
            },
            {
              "featureType": "road.arterial",
              "elementType": "labels.text.fill",
              "stylers": [{
                "color": "#757575"
              }]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry",
              "stylers": [{
                "color": "#dadada"
              }]
            },
            {
              "featureType": "road.highway",
              "elementType": "labels",
              "stylers": [{
                "visibility": "off"
              }]
            },
            {
              "featureType": "road.highway",
              "elementType": "labels.text.fill",
              "stylers": [{
                "color": "#616161"
              }]
            },
            {
              "featureType": "road.local",
              "stylers": [{
                "visibility": "off"
              }]
            },
            {
              "featureType": "road.local",
              "elementType": "labels.text.fill",
              "stylers": [{
                "color": "#9e9e9e"
              }]
            },
            {
              "featureType": "transit.line",
              "elementType": "geometry",
              "stylers": [{
                "color": "#e5e5e5"
              }]
            },
            {
              "featureType": "transit.station",
              "elementType": "geometry",
              "stylers": [{
                "color": "#eeeeee"
              }]
            },
            {
              "featureType": "transit.station.bus",
              "stylers": [{
                "visibility": "on"
              }]
            },
            {
              "featureType": "transit.station.rail",
              "stylers": [{
                "visibility": "on"
              }]
            },
            {
              "featureType": "water",
              "stylers": [{
                  "color": "#61c6de"
                },
                {
                  "visibility": "simplified"
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": [{
                  "color": "#4bafc9"
                },
                {
                  "visibility": "on"
                }
              ]
            },
            {
              "featureType": "water",
              "elementType": "geometry.fill",
              "stylers": [{
                "color": "#4bafc9"
              }]
            },
            {
              "featureType": "water",
              "elementType": "labels.text.fill",
              "stylers": [{
                "color": "#9e9e9e"
              }]
            }
          ]
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
  </body>

</html>