https://www.erosgroup.ae/js/map.js

1function initMap() {
2  // Create a new StyledMapType object, passing it an array of styles,
3  // and the name to be displayed on the map type control.
4  var styledMapType = new google.maps.StyledMapType(
5  [
6      {
7          "featureType": "water",
8          "elementType": "geometry",
9          "stylers": [
10              {
11                  "color": "#e9e9e9"
12              },
13              {
14                  "lightness": 17
15              }
16          ]
17      },
18      {
19          "featureType": "landscape",
20          "elementType": "geometry",
21          "stylers": [
22              {
23                  "color": "#f5f5f5"
24              },
25              {
26                  "lightness": 20
27              }
28          ]
29      },
30      {
31          "featureType": "road.highway",
32          "elementType": "geometry.fill",
33          "stylers": [
34              {
35                  "color": "#ffffff"
36              },
37              {
38                  "lightness": 17
39              }
40          ]
41      },
42      {
43          "featureType": "road.highway",
44          "elementType": "geometry.stroke",
45          "stylers": [
46              {
47                  "color": "#ffffff"
48              },
49              {
50                  "lightness": 29
51              },
52              {
53                  "weight": 0.2
54              }
55          ]
56      },
57      {
58          "featureType": "road.arterial",
59          "elementType": "geometry",
60          "stylers": [
61              {
62                  "color": "#ffffff"
63              },
64              {
65                  "lightness": 18
66              }
67          ]
68      },
69      {
70          "featureType": "road.local",
71          "elementType": "geometry",
72          "stylers": [
73              {
74                  "color": "#ffffff"
75              },
76              {
77                  "lightness": 16
78              }
79          ]
80      },
81      {
82          "featureType": "poi",
83          "elementType": "geometry",
84          "stylers": [
85              {
86                  "color": "#f5f5f5"
87              },
88              {
89                  "lightness": 21
90              }
91          ]
92      },
93      {
94          "featureType": "poi.park",
95          "elementType": "geometry",
96          "stylers": [
97              {
98                  "color": "#dedede"
99              },
100              {
101                  "lightness": 21
102              }
103          ]
104      },
105      {
106          "elementType": "labels.text.stroke",
107          "stylers": [
108              {
109                  "visibility": "on"
110              },
111              {
112                  "color": "#ffffff"
113              },
114              {
115                  "lightness": 16
116              }
117          ]
118      },
119      {
120          "elementType": "labels.text.fill",
121          "stylers": [
122              {
123                  "saturation": 36
124              },
125              {
126                  "color": "#333333"
127              },
128              {
129                  "lightness": 40
130              }
131          ]
132      },
133      {
134          "elementType": "labels.icon",
135          "stylers": [
136              {
137                  "visibility": "off"
138              }
139          ]
140      },
141      {
142          "featureType": "transit",
143          "elementType": "geometry",
144          "stylers": [
145              {
146                  "color": "#f2f2f2"
147              },
148              {
149                  "lightness": 19
150              }
151          ]
152      },
153      {
154          "featureType": "administrative",
155          "elementType": "geometry.fill",
156          "stylers": [
157              {
158                  "color": "#fefefe"
159              },
160              {
161                  "lightness": 20
162              }
163          ]
164      },
165      {
166          "featureType": "administrative",
167          "elementType": "geometry.stroke",
168          "stylers": [
169              {
170                  "color": "#fefefe"
171              },
172              {
173                  "lightness": 17
174              },
175              {
176                  "weight": 1.2
177              }
178          ]
179      }
180  ],
181  
182  {name: 'Styled Map'});
183
184  // Create a map object, and include the MapTypeId to add
185  // to the map type control.
186  var myLatlng = new google.maps.LatLng(51.5165957,-0.1277179);
187  var mapOptions = {
188    zoom: 12,
189    center: myLatlng
190  }
191  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
192
193  var marker = new google.maps.Marker({
194      position: myLatlng,
195      title:"Hello World!"
196  });
197
198  // To add the marker to the map, call setMap();

199  marker.setMap(map);
200
201  //Associate the styled map with the MapTypeId and set it to display.
202  map.mapTypes.set('styled_map', styledMapType);
203  map.setMapTypeId('styled_map');
204}