Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the colors of the google maps [closed]

Tags:

google-maps

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

like image 210
user1125516 Avatar asked Dec 16 '22 02:12

user1125516


1 Answers

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>
like image 191
Heitor Chang Avatar answered Feb 24 '23 08:02

Heitor Chang