https://glemt.org.br/assets/glemt/js/maps.js?v=02

1var styles = [
2    {
3      "elementType": "geometry",
4      "stylers": [
5        {
6          "color": "#f5f5f5"
7        }
8      ]
9    },
10    {
11      "elementType": "labels.icon",
12      "stylers": [
13        {
14          "visibility": "off"
15        }
16      ]
17    },
18    {
19      "elementType": "labels.text.fill",
20      "stylers": [
21        {
22          "color": "#616161"
23        }
24      ]
25    },
26    {
27      "elementType": "labels.text.stroke",
28      "stylers": [
29        {
30          "color": "#f5f5f5"
31        }
32      ]
33    },
34    {
35      "featureType": "administrative.land_parcel",
36      "elementType": "labels.text.fill",
37      "stylers": [
38        {
39          "color": "#bdbdbd"
40        }
41      ]
42    },
43    {
44      "featureType": "poi",
45      "elementType": "geometry",
46      "stylers": [
47        {
48          "color": "#eeeeee"
49        }
50      ]
51    },
52    {
53      "featureType": "poi",
54      "elementType": "labels.text.fill",
55      "stylers": [
56        {
57          "color": "#757575"
58        }
59      ]
60    },
61    {
62      "featureType": "poi.business",
63      "stylers": [
64        {
65          "visibility": "off"
66        }
67      ]
68    },
69    {
70      "featureType": "poi.park",
71      "elementType": "geometry",
72      "stylers": [
73        {
74          "color": "#e5e5e5"
75        }
76      ]
77    },
78    {
79      "featureType": "poi.park",
80      "elementType": "labels.text.fill",
81      "stylers": [
82        {
83          "color": "#9e9e9e"
84        }
85      ]
86    },
87    {
88      "featureType": "road",
89      "elementType": "geometry",
90      "stylers": [
91        {
92          "color": "#ffffff"
93        }
94      ]
95    },
96    {
97      "featureType": "road",
98      "elementType": "labels.icon",
99      "stylers": [
100        {
101          "visibility": "off"
102        }
103      ]
104    },
105    {
106      "featureType": "road.arterial",
107      "elementType": "labels.text.fill",
108      "stylers": [
109        {
110          "color": "#757575"
111        }
112      ]
113    },
114    {
115      "featureType": "road.highway",
116      "elementType": "geometry",
117      "stylers": [
118        {
119          "color": "#dadada"
120        }
121      ]
122    },
123    {
124      "featureType": "road.highway",
125      "elementType": "labels.text.fill",
126      "stylers": [
127        {
128          "color": "#616161"
129        }
130      ]
131    },
132    {
133      "featureType": "road.local",
134      "elementType": "labels.text.fill",
135      "stylers": [
136        {
137          "color": "#9e9e9e"
138        }
139      ]
140    },
141    {
142      "featureType": "transit",
143      "stylers": [
144        {
145          "visibility": "off"
146        }
147      ]
148    },
149    {
150      "featureType": "transit.line",
151      "elementType": "geometry",
152      "stylers": [
153        {
154          "color": "#e5e5e5"
155        }
156      ]
157    },
158    {
159      "featureType": "transit.station",
160      "elementType": "geometry",
161      "stylers": [
162        {
163          "color": "#eeeeee"
164        }
165      ]
166    },
167    {
168      "featureType": "water",
169      "elementType": "geometry",
170      "stylers": [
171        {
172          "color": "#c9c9c9"
173        }
174      ]
175    },
176    {
177      "featureType": "water",
178      "elementType": "labels.text.fill",
179      "stylers": [
180        {
181          "color": "#9e9e9e"
182        }
183      ]
184    }
185  ];
186
187var allLocations = [];
188function initMap() {
189
190  var map = new google.maps.Map(document.getElementById('map'), {
191    zoom: 9,
192    styles: styles,
193    streetViewControl: false,
194    mapTypeControl: false,
195    center: new google.maps.LatLng(-15.5728873,-56.0588273),
196    mapTypeId: google.maps.MapTypeId.ROADMAP
197  });
198
199  var infowindow = new google.maps.InfoWindow();
200
201  var marker, i;
202  var allMarkers = [];
203
204  $.getJSON("/get-json-lojas", function( data ) {
205        var items = [];
206        allLocations = data;
207        var i = 0;
208        $.each( data, function( key, val ) {
209            lojaNome = val['name'];
210            lojaIco = val['ico'];
211            lojaAddress = val['address'];          
212            lojaLat = val['geolocation']['lat'];
213            lojaLong = val['geolocation']['long'];
214
215            marker = new google.maps.Marker({
216                position: new google.maps.LatLng(lojaLat, lojaLong),
217                map: map,
218                icon: lojaIco
219            });
220            allMarkers.push(marker);
221
222            google.maps.event.addListener(marker, 'click', (function(marker, i) {
223                return function() {
224
225                $('.maps-container-scroll a').removeClass("active");
226                $('.maps-container-scroll a[data-id="'+i+'"]').addClass("active");                    
227
228                const url = `https://www.google.com.br/maps/dir//${lat},${long}/@${lat},${long},15.25z?entry=ttu`;
229                    
230                window.open(url);
231                }
232            })(marker, i));
233
234            items.push('<a href="#" data-id="'+i+'" class="maps-content-list">');
235            items.push('<h5>'+ lojaNome+'</h5>');
236            items.push('<div class="loja"><img src="/assets/glemt/img/ico-map-pin.svg"/>'+ lojaAddress+'</div>');
237
238            items.push('</a>');
239            i++;
240        });
241        $(items.join( "" )).appendTo( ".maps-container-scroll" );
242    });
243
244
245    $('.maps-container-scroll').on('click', 'a', function(e) {
246        e.preventDefault();
247      
248    
249        $('.maps-container-scroll a').removeClass("active");
250        $(this).addClass("active");
251    
252        lat = allLocations[$(this).data('id')]['geolocation']['lat'];
253        long = allLocations[$(this).data('id')]['geolocation']['long'];
254        
255        map.setZoom(12);
256        map.panTo(new google.maps.LatLng(lat, long));
257    
258        infowindow.setContent(allLocations[$(this).data('id')]['name']);
259        infowindow.open(map, allMarkers[$(this).data('id')]);
260        
261    });
262    
263
264}
265
266
267
268$(".maps-content-input input").keyup(function() {
269    valor = $(this).val();
270
271    if(valor.length >= 3) {
272        $(".maps-container-scroll a").hide();
273        $(".maps-container-scroll a:icontains('"+valor+"')" ).show();
274    } else {
275        $(".maps-container-scroll a").show();
276    }
277
278});
279
280
281jQuery.expr[':'].icontains = function(a, i, m) {
282return jQuery(a).text().toUpperCase()
283    .indexOf(m[3].toUpperCase()) >= 0;
284};