It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Styled Map Selection

This example applies custom styles to a map by setting MapOptions.styles to a JSON object containing style declarations. Select an option to see some of the customizations you can apply with map styling. One of the options shows you how to hide features,in this case by removing business points of interest and public transport icons from the map.

Read the documentation.

JavaScript

var map;
function initMap() {
  // Create the map with no initial style specified.
  // It therefore has default styling.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -33.86, lng: 151.209 },
    zoom: 13,
    mapTypeControl: false
  });

  // Add a style-selector control to the map.
  var styleControl = document.getElementById("style-selector-control");
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);

  // Set the map's style to the initial value of the selector.
  var styleSelector = document.getElementById("style-selector");
  map.setOptions({ styles: styles[styleSelector.value] });

  // Apply new JSON when the user selects a different style.
  styleSelector.addEventListener("change", function() {
    map.setOptions({ styles: styles[styleSelector.value] });
  });
}

var styles = {
  default: null,
  silver: [
    {
      elementType: "geometry",
      stylers: [{ color: "#f5f5f5" }]
    },
    {
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }]
    },
    {
      elementType: "labels.text.fill",
      stylers: [{ color: "#616161" }]
    },
    {
      elementType: "labels.text.stroke",
      stylers: [{ color: "#f5f5f5" }]
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "labels.text.fill",
      stylers: [{ color: "#bdbdbd" }]
    },
    {
      featureType: "poi",
      elementType: "geometry",
      stylers: [{ color: "#eeeeee" }]
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [{ color: "#757575" }]
    },
    {
      featureType: "poi.park",
      elementType: "geometry",
      stylers: [{ color: "#e5e5e5" }]
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [{ color: "#9e9e9e" }]
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{ color: "#ffffff" }]
    },
    {
      featureType: "road.arterial",
      elementType: "labels.text.fill",
      stylers: [{ color: "#757575" }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [{ color: "#dadada" }]
    },
    {
      featureType: "road.highway",
      elementType: "labels.text.fill",
      stylers: [{ color: "#616161" }]
    },
    {
      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: "water",
      elementType: "geometry",
      stylers: [{ color: "#c9c9c9" }]
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [{ color: "#9e9e9e" }]
    }
  ],

  night: [
    { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
    { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
    { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
    {
      featureType: "administrative.locality",
      elementType: "labels.text.fill",
      stylers: [{ color: "#d59563" }]
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [{ color: "#d59563" }]
    },
    {
      featureType: "poi.park",
      elementType: "geometry",
      stylers: [{ color: "#263c3f" }]
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [{ color: "#6b9a76" }]
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{ color: "#38414e" }]
    },
    {
      featureType: "road",
      elementType: "geometry.stroke",
      stylers: [{ color: "#212a37" }]
    },
    {
      featureType: "road",
      elementType: "labels.text.fill",
      stylers: [{ color: "#9ca5b3" }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [{ color: "#746855" }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.stroke",
      stylers: [{ color: "#1f2835" }]
    },
    {
      featureType: "road.highway",
      elementType: "labels.text.fill",
      stylers: [{ color: "#f3d19c" }]
    },
    {
      featureType: "transit",
      elementType: "geometry",
      stylers: [{ color: "#2f3948" }]
    },
    {
      featureType: "transit.station",
      elementType: "labels.text.fill",
      stylers: [{ color: "#d59563" }]
    },
    {
      featureType: "water",
      elementType: "geometry",
      stylers: [{ color: "#17263c" }]
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [{ color: "#515c6d" }]
    },
    {
      featureType: "water",
      elementType: "labels.text.stroke",
      stylers: [{ color: "#17263c" }]
    }
  ],

  retro: [
    { elementType: "geometry", stylers: [{ color: "#ebe3cd" }] },
    { elementType: "labels.text.fill", stylers: [{ color: "#523735" }] },
    { elementType: "labels.text.stroke", stylers: [{ color: "#f5f1e6" }] },
    {
      featureType: "administrative",
      elementType: "geometry.stroke",
      stylers: [{ color: "#c9b2a6" }]
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "geometry.stroke",
      stylers: [{ color: "#dcd2be" }]
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "labels.text.fill",
      stylers: [{ color: "#ae9e90" }]
    },
    {
      featureType: "landscape.natural",
      elementType: "geometry",
      stylers: [{ color: "#dfd2ae" }]
    },
    {
      featureType: "poi",
      elementType: "geometry",
      stylers: [{ color: "#dfd2ae" }]
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [{ color: "#93817c" }]
    },
    {
      featureType: "poi.park",
      elementType: "geometry.fill",
      stylers: [{ color: "#a5b076" }]
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [{ color: "#447530" }]
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{ color: "#f5f1e6" }]
    },
    {
      featureType: "road.arterial",
      elementType: "geometry",
      stylers: [{ color: "#fdfcf8" }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [{ color: "#f8c967" }]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.stroke",
      stylers: [{ color: "#e9bc62" }]
    },
    {
      featureType: "road.highway.controlled_access",
      elementType: "geometry",
      stylers: [{ color: "#e98d58" }]
    },
    {
      featureType: "road.highway.controlled_access",
      elementType: "geometry.stroke",
      stylers: [{ color: "#db8555" }]
    },
    {
      featureType: "road.local",
      elementType: "labels.text.fill",
      stylers: [{ color: "#806b63" }]
    },
    {
      featureType: "transit.line",
      elementType: "geometry",
      stylers: [{ color: "#dfd2ae" }]
    },
    {
      featureType: "transit.line",
      elementType: "labels.text.fill",
      stylers: [{ color: "#8f7d77" }]
    },
    {
      featureType: "transit.line",
      elementType: "labels.text.stroke",
      stylers: [{ color: "#ebe3cd" }]
    },
    {
      featureType: "transit.station",
      elementType: "geometry",
      stylers: [{ color: "#dfd2ae" }]
    },
    {
      featureType: "water",
      elementType: "geometry.fill",
      stylers: [{ color: "#b9d3c2" }]
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [{ color: "#92998d" }]
    }
  ],

  hiding: [
    {
      featureType: "poi.business",
      stylers: [{ visibility: "off" }]
    },
    {
      featureType: "transit",
      elementType: "labels.icon",
      stylers: [{ visibility: "off" }]
    }
  ]
};

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  font-family: "Roboto", "sans-serif";
  margin: 10px;
  /* Hide the control initially, to prevent it from appearing
           before the map loads. */
  display: none;
}

/* Display the control once it is inside the map. */
#map .map-control {
  display: block;
}

.selector-control {
  font-size: 14px;
  line-height: 30px;
  padding-left: 5px;
  padding-right: 5px;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Styled Map Selection</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="style-selector-control" class="map-control">
      <select id="style-selector" class="selector-control">
        <option value="default">Default</option>
        <option value="silver">Silver</option>
        <option value="night">Night mode</option>
        <option value="retro" selected="selected">Retro</option>
        <option value="hiding">Hide features</option>
      </select>
    </div>
    <div id="map"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Styled Map Selection</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .map-control {
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        font-family: "Roboto", "sans-serif";
        margin: 10px;
        /* Hide the control initially, to prevent it from appearing
           before the map loads. */
        display: none;
      }

      /* Display the control once it is inside the map. */
      #map .map-control {
        display: block;
      }

      .selector-control {
        font-size: 14px;
        line-height: 30px;
        padding-left: 5px;
        padding-right: 5px;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        function initMap() {
          // Create the map with no initial style specified.
          // It therefore has default styling.
          exports.map = new google.maps.Map(document.getElementById("map"), {
            center: {
              lat: -33.86,
              lng: 151.209
            },
            zoom: 13,
            mapTypeControl: false
          }); // Add a style-selector control to the map.

          var styleControl = document.getElementById("style-selector-control");
          exports.map.controls[google.maps.ControlPosition.TOP_LEFT].push(
            styleControl
          ); // Set the map's style to the initial value of the selector.

          var styleSelector = document.getElementById("style-selector");
          exports.map.setOptions({
            styles: styles[styleSelector.value]
          }); // Apply new JSON when the user selects a different style.

          styleSelector.addEventListener("change", function() {
            exports.map.setOptions({
              styles: styles[styleSelector.value]
            });
          });
        }

        var styles = {
          default: null,
          silver: [
            {
              elementType: "geometry",
              stylers: [
                {
                  color: "#f5f5f5"
                }
              ]
            },
            {
              elementType: "labels.icon",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            },
            {
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#616161"
                }
              ]
            },
            {
              elementType: "labels.text.stroke",
              stylers: [
                {
                  color: "#f5f5f5"
                }
              ]
            },
            {
              featureType: "administrative.land_parcel",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#bdbdbd"
                }
              ]
            },
            {
              featureType: "poi",
              elementType: "geometry",
              stylers: [
                {
                  color: "#eeeeee"
                }
              ]
            },
            {
              featureType: "poi",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#757575"
                }
              ]
            },
            {
              featureType: "poi.park",
              elementType: "geometry",
              stylers: [
                {
                  color: "#e5e5e5"
                }
              ]
            },
            {
              featureType: "poi.park",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#9e9e9e"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "geometry",
              stylers: [
                {
                  color: "#ffffff"
                }
              ]
            },
            {
              featureType: "road.arterial",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#757575"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "geometry",
              stylers: [
                {
                  color: "#dadada"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#616161"
                }
              ]
            },
            {
              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: "water",
              elementType: "geometry",
              stylers: [
                {
                  color: "#c9c9c9"
                }
              ]
            },
            {
              featureType: "water",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#9e9e9e"
                }
              ]
            }
          ],
          night: [
            {
              elementType: "geometry",
              stylers: [
                {
                  color: "#242f3e"
                }
              ]
            },
            {
              elementType: "labels.text.stroke",
              stylers: [
                {
                  color: "#242f3e"
                }
              ]
            },
            {
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#746855"
                }
              ]
            },
            {
              featureType: "administrative.locality",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#d59563"
                }
              ]
            },
            {
              featureType: "poi",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#d59563"
                }
              ]
            },
            {
              featureType: "poi.park",
              elementType: "geometry",
              stylers: [
                {
                  color: "#263c3f"
                }
              ]
            },
            {
              featureType: "poi.park",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#6b9a76"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "geometry",
              stylers: [
                {
                  color: "#38414e"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "geometry.stroke",
              stylers: [
                {
                  color: "#212a37"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#9ca5b3"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "geometry",
              stylers: [
                {
                  color: "#746855"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "geometry.stroke",
              stylers: [
                {
                  color: "#1f2835"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#f3d19c"
                }
              ]
            },
            {
              featureType: "transit",
              elementType: "geometry",
              stylers: [
                {
                  color: "#2f3948"
                }
              ]
            },
            {
              featureType: "transit.station",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#d59563"
                }
              ]
            },
            {
              featureType: "water",
              elementType: "geometry",
              stylers: [
                {
                  color: "#17263c"
                }
              ]
            },
            {
              featureType: "water",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#515c6d"
                }
              ]
            },
            {
              featureType: "water",
              elementType: "labels.text.stroke",
              stylers: [
                {
                  color: "#17263c"
                }
              ]
            }
          ],
          retro: [
            {
              elementType: "geometry",
              stylers: [
                {
                  color: "#ebe3cd"
                }
              ]
            },
            {
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#523735"
                }
              ]
            },
            {
              elementType: "labels.text.stroke",
              stylers: [
                {
                  color: "#f5f1e6"
                }
              ]
            },
            {
              featureType: "administrative",
              elementType: "geometry.stroke",
              stylers: [
                {
                  color: "#c9b2a6"
                }
              ]
            },
            {
              featureType: "administrative.land_parcel",
              elementType: "geometry.stroke",
              stylers: [
                {
                  color: "#dcd2be"
                }
              ]
            },
            {
              featureType: "administrative.land_parcel",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#ae9e90"
                }
              ]
            },
            {
              featureType: "landscape.natural",
              elementType: "geometry",
              stylers: [
                {
                  color: "#dfd2ae"
                }
              ]
            },
            {
              featureType: "poi",
              elementType: "geometry",
              stylers: [
                {
                  color: "#dfd2ae"
                }
              ]
            },
            {
              featureType: "poi",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#93817c"
                }
              ]
            },
            {
              featureType: "poi.park",
              elementType: "geometry.fill",
              stylers: [
                {
                  color: "#a5b076"
                }
              ]
            },
            {
              featureType: "poi.park",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#447530"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "geometry",
              stylers: [
                {
                  color: "#f5f1e6"
                }
              ]
            },
            {
              featureType: "road.arterial",
              elementType: "geometry",
              stylers: [
                {
                  color: "#fdfcf8"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "geometry",
              stylers: [
                {
                  color: "#f8c967"
                }
              ]
            },
            {
              featureType: "road.highway",
              elementType: "geometry.stroke",
              stylers: [
                {
                  color: "#e9bc62"
                }
              ]
            },
            {
              featureType: "road.highway.controlled_access",
              elementType: "geometry",
              stylers: [
                {
                  color: "#e98d58"
                }
              ]
            },
            {
              featureType: "road.highway.controlled_access",
              elementType: "geometry.stroke",
              stylers: [
                {
                  color: "#db8555"
                }
              ]
            },
            {
              featureType: "road.local",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#806b63"
                }
              ]
            },
            {
              featureType: "transit.line",
              elementType: "geometry",
              stylers: [
                {
                  color: "#dfd2ae"
                }
              ]
            },
            {
              featureType: "transit.line",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#8f7d77"
                }
              ]
            },
            {
              featureType: "transit.line",
              elementType: "labels.text.stroke",
              stylers: [
                {
                  color: "#ebe3cd"
                }
              ]
            },
            {
              featureType: "transit.station",
              elementType: "geometry",
              stylers: [
                {
                  color: "#dfd2ae"
                }
              ]
            },
            {
              featureType: "water",
              elementType: "geometry.fill",
              stylers: [
                {
                  color: "#b9d3c2"
                }
              ]
            },
            {
              featureType: "water",
              elementType: "labels.text.fill",
              stylers: [
                {
                  color: "#92998d"
                }
              ]
            }
          ],
          hiding: [
            {
              featureType: "poi.business",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            },
            {
              featureType: "transit",
              elementType: "labels.icon",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            }
          ]
        };

        exports.initMap = initMap;
        exports.styles = styles;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="style-selector-control" class="map-control">
      <select id="style-selector" class="selector-control">
        <option value="default">Default</option>
        <option value="silver">Silver</option>
        <option value="night">Night mode</option>
        <option value="retro" selected="selected">Retro</option>
        <option value="hiding">Hide features</option>
      </select>
    </div>
    <div id="map"></div>
  </body>
</html>
(function(exports) { "use strict"; function initMap() { // Create the map with no initial style specified. // It therefore has default styling. exports.map = new google.maps.Map(document.getElementById("map"), { center: { lat: -33.86, lng: 151.209 }, zoom: 13, mapTypeControl: false }); // Add a style-selector control to the map. var styleControl = document.getElementById("style-selector-control"); exports.map.controls[google.maps.ControlPosition.TOP_LEFT].push( styleControl ); // Set the map's style to the initial value of the selector. var styleSelector = document.getElementById("style-selector"); exports.map.setOptions({ styles: styles[styleSelector.value] }); // Apply new JSON when the user selects a different style. styleSelector.addEventListener("change", function() { exports.map.setOptions({ styles: styles[styleSelector.value] }); }); } var styles = { default: null, silver: [ { elementType: "geometry", stylers: [ { color: "#f5f5f5" } ] }, { elementType: "labels.icon", stylers: [ { visibility: "off" } ] }, { elementType: "labels.text.fill", stylers: [ { color: "#616161" } ] }, { elementType: "labels.text.stroke", stylers: [ { color: "#f5f5f5" } ] }, { featureType: "administrative.land_parcel", elementType: "labels.text.fill", stylers: [ { color: "#bdbdbd" } ] }, { featureType: "poi", elementType: "geometry", stylers: [ { color: "#eeeeee" } ] }, { featureType: "poi", elementType: "labels.text.fill", stylers: [ { color: "#757575" } ] }, { featureType: "poi.park", elementType: "geometry", stylers: [ { color: "#e5e5e5" } ] }, { featureType: "poi.park", elementType: "labels.text.fill", stylers: [ { color: "#9e9e9e" } ] }, { featureType: "road", elementType: "geometry", stylers: [ { color: "#ffffff" } ] }, { featureType: "road.arterial", elementType: "labels.text.fill", stylers: [ { color: "#757575" } ] }, { featureType: "road.highway", elementType: "geometry", stylers: [ { color: "#dadada" } ] }, { featureType: "road.highway", elementType: "labels.text.fill", stylers: [ { color: "#616161" } ] }, { 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: "water", elementType: "geometry", stylers: [ { color: "#c9c9c9" } ] }, { featureType: "water", elementType: "labels.text.fill", stylers: [ { color: "#9e9e9e" } ] } ], night: [ { elementType: "geometry", stylers: [ { color: "#242f3e" } ] }, { elementType: "labels.text.stroke", stylers: [ { color: "#242f3e" } ] }, { elementType: "labels.text.fill", stylers: [ { color: "#746855" } ] }, { featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [ { color: "#d59563" } ] }, { featureType: "poi", elementType: "labels.text.fill", stylers: [ { color: "#d59563" } ] }, { featureType: "poi.park", elementType: "geometry", stylers: [ { color: "#263c3f" } ] }, { featureType: "poi.park", elementType: "labels.text.fill", stylers: [ { color: "#6b9a76" } ] }, { featureType: "road", elementType: "geometry", stylers: [ { color: "#38414e" } ] }, { featureType: "road", elementType: "geometry.stroke", stylers: [ { color: "#212a37" } ] }, { featureType: "road", elementType: "labels.text.fill", stylers: [ { color: "#9ca5b3" } ] }, { featureType: "road.highway", elementType: "geometry", stylers: [ { color: "#746855" } ] }, { featureType: "road.highway", elementType: "geometry.stroke", stylers: [ { color: "#1f2835" } ] }, { featureType: "road.highway", elementType: "labels.text.fill", stylers: [ { color: "#f3d19c" } ] }, { featureType: "transit", elementType: "geometry", stylers: [ { color: "#2f3948" } ] }, { featureType: "transit.station", elementType: "labels.text.fill", stylers: [ { color: "#d59563" } ] }, { featureType: "water", elementType: "geometry", stylers: [ { color: "#17263c" } ] }, { featureType: "water", elementType: "labels.text.fill", stylers: [ { color: "#515c6d" } ] }, { featureType: "water", elementType: "labels.text.stroke", stylers: [ { color: "#17263c" } ] } ], retro: [ { elementType: "geometry", stylers: [ { color: "#ebe3cd" } ] }, { elementType: "labels.text.fill", stylers: [ { color: "#523735" } ] }, { elementType: "labels.text.stroke", stylers: [ { color: "#f5f1e6" } ] }, { featureType: "administrative", elementType: "geometry.stroke", stylers: [ { color: "#c9b2a6" } ] }, { featureType: "administrative.land_parcel", elementType: "geometry.stroke", stylers: [ { color: "#dcd2be" } ] }, { featureType: "administrative.land_parcel", elementType: "labels.text.fill", stylers: [ { color: "#ae9e90" } ] }, { featureType: "landscape.natural", elementType: "geometry", stylers: [ { color: "#dfd2ae" } ] }, { featureType: "poi", elementType: "geometry", stylers: [ { color: "#dfd2ae" } ] }, { featureType: "poi", elementType: "labels.text.fill", stylers: [ { color: "#93817c" } ] }, { featureType: "poi.park", elementType: "geometry.fill", stylers: [ { color: "#a5b076" } ] }, { featureType: "poi.park", elementType: "labels.text.fill", stylers: [ { color: "#447530" } ] }, { featureType: "road", elementType: "geometry", stylers: [ { color: "#f5f1e6" } ] }, { featureType: "road.arterial", elementType: "geometry", stylers: [ { color: "#fdfcf8" } ] }, { featureType: "road.highway", elementType: "geometry", stylers: [ { color: "#f8c967" } ] }, { featureType: "road.highway", elementType: "geometry.stroke", stylers: [ { color: "#e9bc62" } ] }, { featureType: "road.highway.controlled_access", elementType: "geometry", stylers: [ { color: "#e98d58" } ] }, { featureType: "road.highway.controlled_access", elementType: "geometry.stroke", stylers: [ { color: "#db8555" } ] }, { featureType: "road.local", elementType: "labels.text.fill", stylers: [ { color: "#806b63" } ] }, { featureType: "transit.line", elementType: "geometry", stylers: [ { color: "#dfd2ae" } ] }, { featureType: "transit.line", elementType: "labels.text.fill", stylers: [ { color: "#8f7d77" } ] }, { featureType: "transit.line", elementType: "labels.text.stroke", stylers: [ { color: "#ebe3cd" } ] }, { featureType: "transit.station", elementType: "geometry", stylers: [ { color: "#dfd2ae" } ] }, { featureType: "water", elementType: "geometry.fill", stylers: [ { color: "#b9d3c2" } ] }, { featureType: "water", elementType: "labels.text.fill", stylers: [ { color: "#92998d" } ] } ], hiding: [ { featureType: "poi.business", stylers: [ { visibility: "off" } ] }, { featureType: "transit", elementType: "labels.icon", stylers: [ { visibility: "off" } ] } ] }; exports.initMap = initMap; exports.styles = styles; })((this.window = this.window || {}));
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .map-control { background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4); font-family: "Roboto", "sans-serif"; margin: 10px; /* Hide the control initially, to prevent it from appearing before the map loads. */ display: none; } /* Display the control once it is inside the map. */ #map .map-control { display: block; } .selector-control { font-size: 14px; line-height: 30px; padding-left: 5px; padding-right: 5px; }
<!DOCTYPE html> <html> <head> <title>Styled Map Selection</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="style-selector-control" class="map-control"> <select id="style-selector" class="selector-control"> <option value="default">Default</option> <option value="silver">Silver</option> <option value="night">Night mode</option> <option value="retro" selected="selected">Retro</option> <option value="hiding">Hide features</option> </select> </div> <div id="map"></div> </body> </html>