Home/ Questions/Q 7631625
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T06:24:06+00:00

is it possible with the new Google maps javascript API to change the colors

  • 0

is it possible with the new Google maps javascript API to change the colors of the maps to have something like this map under the light blue panel

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Styled maps might be what you are looking for,

    It’s worth mentioning the wizard first (note that in #9, it should be styles, not style)

    https://mapstyle.withgoogle.com

    These are references:

    http://code.google.com/apis/maps/documentation/javascript/reference.html#StyledMapType

    http://code.google.com/apis/maps/documentation/javascript/styling.html

    There’s an example of a styled map in the static API
    http://code.google.com/apis/maps/documentation/staticmaps/#StyledMaps

    The saturation and lightness control the look. Less saturated = less color, more lightness = whiter

    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var grayStyles = [
        {
          featureType: "all",
          stylers: [
            { saturation: -90 },
            { lightness: 50 }
          ]
        },
      ];
      var mapOptions = {
        center: new google.maps.LatLng(41.325663, 19.8029607),
        zoom: 15,
        styles: grayStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
    • 0