https://materials-lab.io/static/assets/demo/demo.js

1materialKitDemo = {
2
3  initContactUsMap: function() {
4    var myLatlng = new google.maps.LatLng(44.433530, 26.093928);
5    var mapOptions = {
6      zoom: 14,
7      center: myLatlng,
8      styles: [{
9        "featureType": "water",
10        "stylers": [{
11          "saturation": 43
12        }, {
13          "lightness": -11
14        }, {
15          "hue": "#0088ff"
16        }]
17      }, {
18        "featureType": "road",
19        "elementType": "geometry.fill",
20        "stylers": [{
21          "hue": "#ff0000"
22        }, {
23          "saturation": -100
24        }, {
25          "lightness": 99
26        }]
27      }, {
28        "featureType": "road",
29        "elementType": "geometry.stroke",
30        "stylers": [{
31          "color": "#808080"
32        }, {
33          "lightness": 54
34        }]
35      }, {
36        "featureType": "landscape.man_made",
37        "elementType": "geometry.fill",
38        "stylers": [{
39          "color": "#ece2d9"
40        }]
41      }, {
42        "featureType": "poi.park",
43        "elementType": "geometry.fill",
44        "stylers": [{
45          "color": "#ccdca1"
46        }]
47      }, {
48        "featureType": "road",
49        "elementType": "labels.text.fill",
50        "stylers": [{
51          "color": "#767676"
52        }]
53      }, {
54        "featureType": "road",
55        "elementType": "labels.text.stroke",
56        "stylers": [{
57          "color": "#ffffff"
58        }]
59      }, {
60        "featureType": "poi",
61        "stylers": [{
62          "visibility": "off"
63        }]
64      }, {
65        "featureType": "landscape.natural",
66        "elementType": "geometry.fill",
67        "stylers": [{
68          "visibility": "on"
69        }, {
70          "color": "#b8cb93"
71        }]
72      }, {
73        "featureType": "poi.park",
74        "stylers": [{
75          "visibility": "on"
76        }]
77      }, {
78        "featureType": "poi.sports_complex",
79        "stylers": [{
80          "visibility": "on"
81        }]
82      }, {
83        "featureType": "poi.medical",
84        "stylers": [{
85          "visibility": "on"
86        }]
87      }, {
88        "featureType": "poi.business",
89        "stylers": [{
90          "visibility": "simplified"
91        }]
92      }],
93      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
94    };
95    var map = new google.maps.Map(document.getElementById("contactUsMap"), mapOptions);
96
97    var marker = new google.maps.Marker({
98      position: myLatlng,
99      title: "Hello World!"
100    });
101    marker.setMap(map);
102  },
103
104  initContactUs2Map: function() {
105    var lat = 44.433530;
106    var long = 26.093928;
107
108    var centerLong = long - 0.025;
109
110    var myLatlng = new google.maps.LatLng(lat, long);
111    var centerPosition = new google.maps.LatLng(lat, centerLong);
112
113    var mapOptions = {
114      zoom: 14,
115      center: centerPosition,
116      styles: [{
117        "featureType": "water",
118        "stylers": [{
119          "saturation": 43
120        }, {
121          "lightness": -11
122        }, {
123          "hue": "#0088ff"
124        }]
125      }, {
126        "featureType": "road",
127        "elementType": "geometry.fill",
128        "stylers": [{
129          "hue": "#ff0000"
130        }, {
131          "saturation": -100
132        }, {
133          "lightness": 99
134        }]
135      }, {
136        "featureType": "road",
137        "elementType": "geometry.stroke",
138        "stylers": [{
139          "color": "#808080"
140        }, {
141          "lightness": 54
142        }]
143      }, {
144        "featureType": "landscape.man_made",
145        "elementType": "geometry.fill",
146        "stylers": [{
147          "color": "#ece2d9"
148        }]
149      }, {
150        "featureType": "poi.park",
151        "elementType": "geometry.fill",
152        "stylers": [{
153          "color": "#ccdca1"
154        }]
155      }, {
156        "featureType": "road",
157        "elementType": "labels.text.fill",
158        "stylers": [{
159          "color": "#767676"
160        }]
161      }, {
162        "featureType": "road",
163        "elementType": "labels.text.stroke",
164        "stylers": [{
165          "color": "#ffffff"
166        }]
167      }, {
168        "featureType": "poi",
169        "stylers": [{
170          "visibility": "off"
171        }]
172      }, {
173        "featureType": "landscape.natural",
174        "elementType": "geometry.fill",
175        "stylers": [{
176          "visibility": "on"
177        }, {
178          "color": "#b8cb93"
179        }]
180      }, {
181        "featureType": "poi.park",
182        "stylers": [{
183          "visibility": "on"
184        }]
185      }, {
186        "featureType": "poi.sports_complex",
187        "stylers": [{
188          "visibility": "on"
189        }]
190      }, {
191        "featureType": "poi.medical",
192        "stylers": [{
193          "visibility": "on"
194        }]
195      }, {
196        "featureType": "poi.business",
197        "stylers": [{
198          "visibility": "simplified"
199        }]
200      }],
201      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
202    };
203    var map = new google.maps.Map(document.getElementById("contactUs2Map"), mapOptions);
204
205    var marker = new google.maps.Marker({
206      position: myLatlng,
207      title: "Hello World!"
208    });

209    marker.setMap(map);
210  },
211
212  presentationAnimations: function() {
213    $(function() {
214
215      var $window = $(window),
216        isTouch = Modernizr.touch;
217
218      if (isTouch) {
219        $('.add-animation').addClass('animated');
220      }
221
222      $window.on('scroll', revealAnimation);
223
224      function revealAnimation() {
225        // Showed...
226        $(".add-animation:not(.animated)").each(function() {
227          var $this = $(this),
228            offsetTop = $this.offset().top,
229            scrolled = $window.scrollTop(),
230            win_height_padded = $window.height();
231          if (scrolled + win_height_padded > offsetTop) {
232            $this.addClass('animated');
233          }
234        });
235        // Hidden...
236        $(".add-animation.animated").each(function(index) {
237          var $this = $(this),
238            offsetTop = $this.offset().top;
239          scrolled = $window.scrollTop(),
240            windowHeight = $window.height();
241
242          win_height_padded = windowHeight * 0.8;
243          if (scrolled + win_height_padded < offsetTop) {
244            $(this).removeClass('animated')
245          }
246        });
247      }
248
249      revealAnimation();
250    });
251
252  }
253};