https://bailiffreform.org/plugins/takingcontrol/base/assets/js/map.js

1function onInit() {
2
3	google.maps.visualRefresh = true;
4
5	var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
6		(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
7
8	if (isMobile) {
9		var viewport = document.querySelector("meta[name=viewport]");
10		viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
11	}
12
13	var mapDiv = document.getElementById('map');
14	mapDiv.style.width = isMobile ? '100%' : '100%';
15	mapDiv.style.height = isMobile ? '100%' : '100%';
16
17    var infoWindow = new google.maps.InfoWindow();
18
19	// google map config
20	var map = new google.maps.Map(mapDiv, {
21		styles: [
22			{
23				"featureType": "administrative",
24				"elementType": "labels.text.fill",
25				"stylers": [
26					{
27					"color": "#404040"
28					}
29				]
30			},
31			{
32				"featureType": "landscape",
33				"elementType": "all",
34				"stylers": [
35					{
36						"color": "#f2f2f2"
37					}
38				]
39			},
40			{
41				"featureType": "poi",
42				"elementType": "all",
43				"stylers": [
44					{
45						"visibility": "off"
46					}
47				]
48			},
49			{
50				"featureType": "road",
51				"elementType": "all",
52				"stylers": [
53					{
54						"saturation": -100
55					},
56					{
57						"lightness": 45
58					}
59				]
60			},
61			{
62				"featureType": "road.highway",
63				"elementType": "all",
64				"stylers": [
65					{
66						"visibility": "off"
67					}
68				]
69			},
70			{
71				"featureType": "road.arterial",
72				"elementType": "labels.icon",
73				"stylers": [
74					{
75						"visibility": "off"
76					}
77				]
78			},
79			{
80				"featureType": "transit",
81				"elementType": "all",
82				"stylers": [
83					{
84						"visibility": "off"
85					}
86				]
87			},
88			{
89				"featureType": "water",
90				"elementType": "all",
91				"stylers": [
92					{
93						"color": "#394554"
94					},
95					{
96						"visibility": "on"
97					}
98				]
99			}
100		],
101		center: new google.maps.LatLng(53, -2),
102		disableDefaultUI: true,
103		zoom: 7,
104		zoomControl: true,
105		panControl: true,
106		mapTypeId: google.maps.MapTypeId.ROADMAP
107	});
108	// END: google map config
109	
110	map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
111	map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
112
113	// map.data.loadGeoJson('/plugins/takingcontrol/base/data.geojson');
114	map.data.loadGeoJson('/plugins/takingcontrol/base/assets/data_filtered.geojson');
115
116	map.data.setStyle({
117		strokeWeight: 1,
118		strokeOpacity: 0.2
119	});
120
121	map.data.addListener('click', function(event) {
122
123		// set the loading ajax window
124		// infoWindow.setContent("<img src='/themes/takingcontrol/assets/images/loading.gif' />");
125		// move the info window to where the user clicked
126		infoWindow.setPosition(event.latLng);
127		// open the info window
128		infoWindow.open(map);
129
130		console.log(event)
131
132		// make the request to the CMS
133		$.request('onGetExperiences', {
134		    data: {
135				id: event.feature.Fg.pcon16cd
136			},
137			success: function(data) {
138
139				// set the info window content
140				infoWindow.setContent(data.html);
141
142				// init slick slider
143				$('.experience-slider').slick({
144					adaptiveHeight: true,
145					dots: true,
146					prevArrow: "<div class='slick-arrow slick-prev'></div>",
147					nextArrow: "<div class='slick-arrow slick-next'></div>"
148				});
149
150			}
151		});
152
153	});
154
155	
156
157	// add fusion table layer
158	// layer = new google.maps.FusionTablesLayer({
159	// 	map: map,
160	// 	heatmap: { enabled: false },
161	// 	suppressInfoWindows: true,
162	// 	query: {
163	// 		select: "col0\x3e\x3e1",
164	// 		from: "1XnQWpTReW1jOuuakkIHML58vkJU4CqGv1ybyQrXe",
165	// 		where: ""
166	// 	},
167	// 	options: {
168	// 		styleId: 2,
169	// 		templateId: 2,
170	// 	}, 
171	// });
172
173
174	// replace the marker content with textimonials
175	// google.maps.event.addListener(layer, 'click', function(e) {
176
177	// 	console.log(e);
178
179	// 	// set the loading ajax window
180	// 	infoWindow.setContent("<img src='/themes/takingcontrol/assets/images/loading.gif' />");
181	// 	// move the info window to where the user clicked
182	// 	infoWindow.setPosition(e.latLng);
183	// 	// open the info window
184	// 	infoWindow.open(map);
185
186	// 	// make the request to the CMS
187	// 	$.request('onGetExperiences', {
188	// 		data: {
189	// 			id: e.row.pcon14cd.value
190	// 		},
191	// 		success: function(data) {
192
193	// 			// set the info window content
194	// 			infoWindow.setContent(data.html);
195
196	// 			// init slick slider
197	// 			$('.experience-slider').slick({
198	// 				adaptiveHeight: true,
199	// 				dots: true,
200	// 				prevArrow: "<div class='slick-arrow slick-prev'></div>",
201	// 				nextArrow: "<div class='slick-arrow slick-next'></div>"
202	// 			});
203
204	// 		}
205	// 	});
206
207	// });
208
209
210
211	// Create the search box and link it to the UI element.
212	var input = document.getElementById('pac-input');
213		var searchBox = new google.maps.places.SearchBox(
214			input,
215			{
216				types: ['geocode','regions'],
217				componentRestrictions: {
218					country: "uk"
219				}
220			}
221	);
222
223	// sublocality_level_1
224	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input);
225
226	// Bias the SearchBox results towards current map's viewport.
227	map.addListener('bounds_changed', function() {
228		searchBox.setBounds(map.getBounds());
229	});
230
231	var markers = [];
232	// [START region_getplaces]
233	// Listen for the event fired when the user selects a prediction and retrieve
234	// more details for that place.
235	searchBox.addListener('places_changed', function() {
236		var places = searchBox.getPlaces();
237		if (places.length == 0) {
238			return;
239		}
240
241		// Clear out the old markers.

242		markers.forEach(function(marker) {
243			marker.setMap(null);
244		});
245
246		markers = [];
247
248		// For each place, get the icon, name and location.
249		var bounds = new google.maps.LatLngBounds();
250
251		places.forEach(function(place) {
252			var icon = {
253				url: place.icon,
254				size: new google.maps.Size(71, 71),
255				origin: new google.maps.Point(0, 0),
256				anchor: new google.maps.Point(17, 34),
257				scaledSize: new google.maps.Size(25, 25)
258			};
259
260			// Create a marker for each place.
261			markers.push(new google.maps.Marker({
262				map: map,
263				icon: icon,
264				title: place.name,
265				position: place.geometry.location,
266			}));
267
268			if (place.geometry.viewport) {
269				bounds.union(place.geometry.viewport);
270			} else {
271				bounds.extend(place.geometry.location);
272			}
273		});
274
275		map.fitBounds(bounds);
276		map.setZoom(9);
277
278	});
279}