https://www.highspeedplumbing.com/public/assets/js/frontend/map.js

1var markers = new Array();
2function initMap() {
3    var styledMapType = new google.maps.StyledMapType(
4[
5  {
6    "elementType": "geometry",
7    "stylers": [
8      {
9        "color": "#f5f5f5"
10      }
11    ]
12  },
13  {
14    "elementType": "labels.icon",
15    "stylers": [
16      {
17        "visibility": "off"
18      }
19    ]
20  },
21  {
22    "elementType": "labels.text.fill",
23    "stylers": [
24      {
25        "color": "#616161"
26      }
27    ]
28  },
29  {
30    "elementType": "labels.text.stroke",
31    "stylers": [
32      {
33        "color": "#f5f5f5"
34      }
35    ]
36  },
37  {
38    "featureType": "administrative.land_parcel",
39    "elementType": "labels.text.fill",
40    "stylers": [
41      {
42        "color": "#bdbdbd"
43      }
44    ]
45  },
46  {
47    "featureType": "poi",
48    "elementType": "geometry",
49    "stylers": [
50      {
51        "color": "#eeeeee"
52      }
53    ]
54  },
55  {
56    "featureType": "poi",
57    "elementType": "labels.text.fill",
58    "stylers": [
59      {
60        "color": "#757575"
61      }
62    ]
63  },
64  {
65    "featureType": "poi.park",
66    "elementType": "geometry",
67    "stylers": [
68      {
69        "color": "#e5e5e5"
70      }
71    ]
72  },
73  {
74    "featureType": "poi.park",
75    "elementType": "labels.text.fill",
76    "stylers": [
77      {
78        "color": "#9e9e9e"
79      }
80    ]
81  },
82  {
83    "featureType": "road",
84    "elementType": "geometry",
85    "stylers": [
86      {
87        "color": "#ffffff"
88      }
89    ]
90  },
91  {
92    "featureType": "road.arterial",
93    "elementType": "labels.text.fill",
94    "stylers": [
95      {
96        "color": "#757575"
97      }
98    ]
99  },
100  {
101    "featureType": "road.highway",
102    "elementType": "geometry",
103    "stylers": [
104      {
105        "color": "#dadada"
106      }
107    ]
108  },
109  {
110    "featureType": "road.highway",
111    "elementType": "labels.text.fill",
112    "stylers": [
113      {
114        "color": "#616161"
115      }
116    ]
117  },
118  {
119    "featureType": "road.local",
120    "elementType": "labels.text.fill",
121    "stylers": [
122      {
123        "color": "#9e9e9e"
124      }
125    ]
126  },
127  {
128    "featureType": "transit.line",
129    "elementType": "geometry",
130    "stylers": [
131      {
132        "color": "#e5e5e5"
133      }
134    ]
135  },
136  {
137    "featureType": "transit.station",
138    "elementType": "geometry",
139    "stylers": [
140      {
141        "color": "#eeeeee"
142      }
143    ]
144  },
145  {
146    "featureType": "water",
147    "elementType": "geometry",
148    "stylers": [
149      {
150        "color": "#c9c9c9"
151      }
152    ]
153  },
154  {
155    "featureType": "water",
156    "elementType": "labels.text.fill",
157    "stylers": [
158      {
159        "color": "#9e9e9e"
160      }
161    ]
162  }
163],
164      {name: 'Styled Map'});
165 
166  if(slug == 'serviceareas')
167  {
168  var map = new google.maps.Map(document.getElementById('map'), {
169    zoom: 10,
170   center: {lat: 34.1333522, lng: -117.6},
171    mapTypeId: google.maps.MapTypeId.ROADMAP,
172    
173  })
174}
175else
176{
177    var map = new google.maps.Map(document.getElementById('map'), {
178    zoom: 5,
179   center: {lat: 34.1333522, lng: -112.40},
180    mapTypeId: google.maps.MapTypeId.ROADMAP,
181    
182  })
183
184}
185
186var imageoption = {
187  url: base_url + 'public/assets/css/images/location_pin.png',
188  size: new google.maps.Size(90, 90),
189   origin: new google.maps.Point(0, 0),
190  // anchor: new google.maps.Point(0, 32)
191
192};
193  var infowindow = new google.maps.InfoWindow({});
194  var i = 0;
195  document.querySelectorAll('.service-area-map1').forEach(event => {
196    marker = new google.maps.Marker({
197      title: event.getAttribute("data-title"),
198	 // address:event.getAttribute("data-address"),
199      position: new google.maps.LatLng(event.getAttribute("data-lat"), event.getAttribute("data-lon")),
200      icon: imageoption,
201      map: map,
202	  animation: google.maps.Animation.DROP,
203    });
204markers.push(marker);
205    google.maps.event.addListener(marker, 'click', (function (marker, i) {
206      return function () {
207        // var dir = event.getAttribute("data-title") + '<br><a href ="https://www.google.com/maps/search/?api=1&query=' + event.getAttribute("data-lat") + ',' + event.getAttribute("data-lon") + '" target="_blank" >Get directions</a>';
208		
209         var lat = marker.getPosition().lat();
210        var lng = marker.getPosition().lng();
211    
212		var dir = '<div class="get_directions_section"><h4>'+ event.getAttribute("data-title") +'</h4><p>'+ event.getAttribute("data-address") +'</p><a class="get_direct" href="https://www.google.com/maps/search/?api=1&query=' + event.getAttribute("data-lat") + ',' + event.getAttribute("data-lon") + '" target="_blank">Get Directions</a></div>';
213        infowindow.setContent(dir)
214        infowindow.open(map, marker)
215        map.setZoom(10);
216        map.setCenter({lat: lat, lng: lng+0.2});
217
218      }
219    })(marker, i)
220
221    )
222     google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
223      return function () {
224      }
225    })(marker, i)
226    )
227
228
229    google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
230      return function () {
231        $("#services_" + i).removeClass("highlighted");
232      }
233    })(marker, i)
234    )
235    i++
236  });
237
238  map.mapTypes.set('styled_map', styledMapType);
239  map.setMapTypeId('styled_map');
240
241}
242
243function triggerClick(i) {
244  google.maps.event.trigger(markers[i], 'click');
245}