Skip to Content (Press Enter)
2022-07-08 12-19-58
Eduardo Benites
119Views
2Comments
Solved
[Google Maps Web] How to use new styles on the map?
Question
CSS
Forge
Maps
google-maps-web
Web icon
Google Maps Web (O11)
Forge asset by Labs

Hello guys,


I found this site that generates the style of your map to your desire, but I am not able to use json in the map options. I think I'm doing it wrong, but I also do not think it's very different from this.


So I'd like to know how to use it.


Link generator style

https://mapstyle.withgoogle.com/


Thanks.

0
0
07 Mar 2019
Copy Link
2022-07-08 12-19-58
Eduardo Benites
Solution

Sorted out!


In my searches I found a "styles" tag, which you must enter in the "options".


As for example below:



"{

    panControl: false,

    streetViewControl: false,

    mapTypeControlOptions: false,

    mapTypeControl: false,

    mapTypeId: google.maps.MapTypeId.ROADMAP,

    zoomControl: false,

    styles: [

      {

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" color "": "" # 808080 ""

          }

        ]

      },

      {

        "" elementType "": "" labels.icon "",

        "stylers": [

          {

            "" visibility "": "" off ""

          }

        ]

      },

      {

        "" elementType "": "" labels.text.fill "",

        "stylers": [

          {

            "" color "": "" # 616161 ""

          }

        ]

      },

      {

        "" elementType "": "" labels.text.stroke "",

        "stylers": [

          {

            "" color "": "" # f5f5f5 ""

          }

        ]

      },

      {

        "" featureType "": "" administrative "",

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" visibility "": "" off ""

          }

        ]

      },

      {

        "" featureType "": "" administrative.land_parcel "",

        "" elementType "": "" labels.text.fill "",

        "stylers": [

          {

            "" color "": "" #bdbdbd ""

          }

        ]

      },

      {

        "" featureType "": "" poi "",

        "stylers": [

          {

            "" visibility "": "" off ""

          }

        ]

      },

      {

        "" 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 "",

        "stylers": [

          {

            "" visibility "": "" off ""

          }

        ]

      },

      {

        "" featureType "": "" road "",

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" color "": "" #ffffff ""

          }

        ]

      },

      {

        "" featureType "": "" road "",

        "" elementType "": "" labels.icon "",

        "stylers": [

          {

            "" visibility "": "" off ""

          }

        ]

      },

      {

        "" featureType "": "" road.arterial "",

        "" elementType "": "" labels.text.fill "",

        "stylers": [

          {

            "" color "": "" # 757575 ""

          }

        ]

      },

      {

        "" featureType "": "" road.highway "",

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" color "": "" #data ""

          }

        ]

      },

      {

        "" featureType "": "" road.highway "",

        "" elementType "": "" labels.text.fill "",

        "stylers": [

          {

            "" color "": "" # 616161 ""

          }

        ]

      },

      {

        "" featureType "": "" road.local "",

        "" elementType "": "" labels.text.fill "",

        "stylers": [

          {

            "" color "": "" # 9e9e9e ""

          }

        ]

      },

      {

        "" featureType "": "" transit "",

        "stylers": [

          {

            "" visibility "": "" off ""

          }

        ]

      },

      {

        "" featureType "": "" transit.line "",

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" color "": "" # e5e5e5 ""

          }

        ]

      },

      {

        "" featureType "": "" transit.station "",

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" color "": "" #eeeeee ""

          }

        ]

      },

      {

        "" featureType "": "" water "",

        "" elementType "": "" geometry "",

        "stylers": [

          {

            "" color "": "" #ffffff ""

          }

        ]

      },

      {

        "" featureType "": "" water "",

        "" elementType "": "" labels.text.fill "",

        "stylers": [

          {

            "" color "": "" #ffffff ""

          }

        ]

      }

    ]

} "

0
0
07 Mar 2019
Copy Link
2025-10-09 15-40-22
Craig St Jean
Staff

Thank you for posting your solution!

1
0
07 Mar 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.