Forge Component
(39)
Published on 6 Aug by Labs
39 votes
Published on 6 Aug 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.

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

          }

        ]

      }

    ]

} "

Solution

Thank you for posting your solution!