https://utopikcollection.com/js/maps/map-dark.js

1// ------------------------------------------------
2// Project Name: Beldon - Coming Soon and Landing Page Template
3// Project Description: Beldon - awesome coming soon template to kick-start your project
4// Tags: mix_design, coming soon, under construction, template, landing page, portfolio, one page, responsive, html5, css3, creative, clean, agency, personal page
5// Version: 1.0.4
6// Build Date: November 2021
7// Last Update: January 2024
8// This product is available exclusively on Themeforest
9// Author: mix_design
10// Author URI: https://themeforest.net/user/mix_design
11// File name: map-dark.js
12// ------------------------------------------------
13
14// ------------------------------------------------
15// Table of Contents
16// ------------------------------------------------
17//
18//  1. Google Map Parameters
19//  2. Google Map Custom Marker Icon
20//  3. Style Of The Map
21//  4. Google Map Options
22//  5. Inizialize The Map
23//  6. Custom Marker
24//  7. Custom zoom-in/zoom-out Buttons
25//
26// ------------------------------------------------
27// Table of Contents End
28// ------------------------------------------------
29
30$(function() {
31  // Insert Your Google Maps Parameters
32  var latitude = 40.761425,
33    longitude = -73.977643,
34    map_zoom = 14;
35
36  // Google Map Custom Marker Icon
37  var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
38  var marker_url = ( is_internetExplorer11 ) ? 'img/icons/icon-location-dark.png' : 'img/icons/icon-location-dark.svg';
39
40    var main_color = '#160c37',
41      saturation_value= 1,
42      brightness_value= 5;
43
44      // Style Of The Map
45      var style= [
46        {
47          "stylers": [
48            {
49              "color": "#151625"
50            }
51          ]
52        },
53        {
54          "elementType": "geometry.fill",
55          "stylers": [
56            {
57              "color": "#151625"
58            }
59          ]
60        },
61        {
62          "elementType": "labels.icon",
63          "stylers": [
64            {
65              "visibility": "off"
66            }
67          ]
68        },
69        {
70          "elementType": "labels.text.fill",
71          "stylers": [
72            {
73              "color": "#9298e2"
74            }
75          ]
76        },
77        {
78          "elementType": "labels.text.stroke",
79          "stylers": [
80            {
81              "color": "#1b1931"
82            }
83          ]
84        },
85        {
86          "featureType": "administrative.land_parcel",
87          "stylers": [
88            {
89              "visibility": "off"
90            }
91          ]
92        },
93        {
94          "featureType": "administrative.locality",
95          "elementType": "labels.text.fill",
96          "stylers": [
97            {
98              "color": "#d9d7f9"
99            }
100          ]
101        },
102        {
103          "featureType": "administrative.locality",
104          "elementType": "labels.text.stroke",
105          "stylers": [
106            {
107              "color": "#1b1931"
108            }
109          ]
110        },
111        {
112          "featureType": "landscape",
113          "stylers": [
114            {
115              "color": "#1c1e32"
116            }
117          ]
118        },
119        {
120          "featureType": "poi",
121          "elementType": "geometry",
122          "stylers": [
123            {
124              "color": "#282a47"
125            }
126          ]
127        },
128        {
129          "featureType": "poi",
130          "elementType": "labels.text.fill",
131          "stylers": [
132            {
133              "color": "#b1aee5"
134            }
135          ]
136        },
137        {
138          "featureType": "road",
139          "elementType": "geometry.fill",
140          "stylers": [
141            {
142              "color": "#181a2b"
143            }
144          ]
145        },
146        {
147          "featureType": "road",
148          "elementType": "labels.text.fill",
149          "stylers": [
150            {
151              "color": "#d2ccf0"
152            }
153          ]
154        },
155        {
156          "featureType": "road.arterial",
157          "elementType": "geometry",
158          "stylers": [
159            {
160              "color": "#1a1b2b"
161            }
162          ]
163        },
164        {
165          "featureType": "road.highway",
166          "elementType": "geometry",
167          "stylers": [
168            {
169              "color": "#925ad3"
170            }
171          ]
172        },
173        {
174          "featureType": "road.highway",
175          "elementType": "geometry.stroke",
176          "stylers": [
177            {
178              "color": "#6f40a5"
179            }
180          ]
181        },
182        {
183          "featureType": "road.highway.controlled_access",
184          "elementType": "geometry.fill",
185          "stylers": [
186            {
187              "color": "#761ae0"
188            }
189          ]
190        },
191        {
192          "featureType": "road.highway.controlled_access",
193          "elementType": "geometry.stroke",
194          "stylers": [
195            {
196              "color": "#5e2f98"
197            }
198          ]
199        },
200        {
201          "featureType": "road.local",
202          "elementType": "labels.text.fill",
203          "stylers": [
204            {
205              "color": "#b1afda"
206            }
207          ]
208        },
209        {
210          "featureType": "transit",
211          "elementType": "labels.text.fill",
212          "stylers": [
213            {
214              "color": "#555469"
215            }
216          ]
217        },
218        {
219          "featureType": "water",
220          "elementType": "geometry",
221          "stylers": [
222            {
223              "color": "#0f101b"
224            }
225          ]
226        },
227        {
228          "featureType": "water",
229          "elementType": "labels.text.fill",
230          "stylers": [
231            {
232              "color": "#2a2d41"
233            }
234          ]
235        }
236      ];
237
238      // Google Map Options
239      var map_options = {
240            center: new google.maps.LatLng(latitude, longitude),
241            zoom: map_zoom,
242            gestureHandling: 'cooperative',
243            panControl: false,
244            zoomControl: false,
245            mapTypeControl: false,
246            streetViewControl: false,
247            mapTypeId: google.maps.MapTypeId.ROADMAP,
248            scrollwheel: false,
249            styles: style,
250        }
251
252      // Inizialize The Map
253      var map = new google.maps.Map(document.getElementById('google-container'), map_options);
254
255      // Custom Marker
256      var marker = new google.maps.Marker({
257          position: new google.maps.LatLng(latitude, longitude),
258          map: map,
259          visible: true,
260        icon: marker_url,
261      });
262
263      // Custom zoom-in/zoom-out Buttons
264      function CustomZoomControl(controlDiv, map) {
265
266          var controlUIzoomIn= document.getElementById('zoom-in'),
267            controlUIzoomOut= document.getElementById('zoom-out');
268          controlDiv.appendChild(controlUIzoomIn);
269          controlDiv.appendChild(controlUIzoomOut);
270
271        google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
272            map.setZoom(map.getZoom()+1)
273        });
274        google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
275            map.setZoom(map.getZoom()-1)
276        });
277      }
278
279      var zoomControlDiv = document.createElement('div');
280      var zoomControl = new CustomZoomControl(zoomControlDiv, map);
281
282        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv);
283
284});