https://durratbahrain.com/assets/js/theme-map.js

1function  onReadyMap(){
2(function ($) {
3    // USE STRICT
4    "use strict";
5  
6    var mapSelector = $('.js-google-map');
7  
8    function addMaker(makers, map, icon) {
9        var marker, i;
10        var infowindow = new google.maps.InfoWindow();
11        for (i = 0; i < makers.length; i++) {
12            var mapText = '<div class="map__box-info"><h4>'+ makers[i][0] +'</h4><p>'+ makers[i][1] +'</p></div>';
13  
14  
15            marker = new google.maps.Marker({
16                position: new google.maps.LatLng(makers[i][2], makers[i][3]),
17                map: map,
18                icon: icon,
19                animation: google.maps.Animation.DROP
20            });
21            google.maps.event.addListener(marker, 'click', (function(marker, i) {
22                return function() {
23                    infowindow.setContent(mapText);
24                    infowindow.open(map, marker);
25                }
26            })(marker, i));
27        }
28    }
29  
30    mapSelector.each(function () {
31        var that = $(this);
32  
33        var mapStyleDefault = [
34            {
35                "featureType": "landscape",
36                "stylers": [
37                    {
38                        "saturation": -100
39                    },
40                    {
41                        "lightness": 60
42                    }
43                ]
44            },
45            {
46                "featureType": "road.local",
47                "stylers": [
48                    {
49                        "saturation": -100
50                    },
51                    {
52                        "lightness": 40
53                    },
54                    {
55                        "visibility": "on"
56                    }
57                ]
58            },
59            {
60                "featureType": "transit",
61                "stylers": [
62                    {
63                        "saturation": -100
64                    },
65                    {
66                        "visibility": "simplified"
67                    }
68                ]
69            },
70            {
71                "featureType": "administrative.province",
72                "stylers": [
73                    {
74                        "visibility": "off"
75                    }
76                ]
77            },
78            {
79                "featureType": "water",
80                "stylers": [
81                    {
82                        "visibility": "on"
83                    },
84                    {
85                        "lightness": 30
86                    }
87                ]
88            },
89            {
90                "featureType": "road.highway",
91                "elementType": "geometry.fill",
92                "stylers": [
93                    {
94                        "color": "#ef8c25"
95                    },
96                    {
97                        "lightness": 40
98                    }
99                ]
100            },
101            {
102                "featureType": "road.highway",
103                "elementType": "geometry.stroke",
104                "stylers": [
105                    {
106                        "visibility": "off"
107                    }
108                ]
109            },
110            {
111                "featureType": "poi.park",
112                "elementType": "geometry.fill",
113                "stylers": [
114                    {
115                        "color": "#b6c54c"
116                    },
117                    {
118                        "lightness": 40
119                    },
120                    {
121                        "saturation": -40
122                    }
123                ]
124            },
125            {}
126        ];
127  
128        var mapHolder = that.find('.js-map-holder');
129        var idMapHolder = mapHolder.attr('id');
130  
131        var options = {
132            makericon: 'images/icons/ic-maker-01.png',
133            makers: '[["New Jersey", "Content", 40.543557, -74.127108]]',
134            zoom : 17,
135            center: new google.maps.LatLng(40.543557, -74.127108),
136            scrollwheel: 0,
137            navigationcontrol: true,
138            maptypecontrol: false,
139            scalecontrol: false,
140            draggable: 1,
141            styles: mapStyleDefault,
142            maptypeId: google.maps.MapTypeId.ROADMAP
143        };
144  
145        for (var k in options) {
146            if (options.hasOwnProperty(k)) {
147                if ($(this).attr('data-' + k) != null) {
148                    options[k] = $(this).attr("data-"+k);
149                }
150            }
151        }
152  
153        var locations = $.parseJSON(options.makers);
154        var bound = new google.maps.LatLngBounds();
155  
156        for (var i = 0; i < locations.length; i++) {
157            bound.extend(new google.maps.LatLng(locations[i][2], locations[i][3]));
158        }
159  
160        var mapOptions = {
161            zoom: options.zoom,
162            scrollwheel: options.scrollwheel,
163            navigationControl: options.navigationcontrol,
164            mapTypeControl: options.maptypecontrol,
165            scaleControl: options.scalecontrol,
166            draggable: options.draggable,
167            styles: options.styles,
168            center: bound.getCenter(),
169            mapTypeId: options.maptypeId
170        };
171  
172        var mapAPI = new google.maps.Map(document.getElementById(idMapHolder), mapOptions);
173        addMaker(locations, mapAPI, options.makericon);
174    });
175  
176  })(jQuery);
177
178}