1 |
57451
|
k.triantaf
|
// google maps variables
|
2 |
|
|
var marker_url = isHighDensity() ? 'assets/img/md-images/ic_place_black_48dp.png' : 'assets/img/md-images/ic_place_black_24dp.png',
|
3 |
|
|
marker_url_beenhere = isHighDensity() ? 'assets/img/md-images/ic_beenhere_black_48dp.png' : 'assets/img/md-images/ic_beenhere_black_24dp.png',
|
4 |
|
|
marker_url_history = isHighDensity() ? 'assets/img/md-images/ic_location_history_black_48dp.png' : 'assets/img/md-images/ic_location_history_black_24dp.png',
|
5 |
|
|
marker_url_dining = isHighDensity() ? 'assets/img/md-images/ic_local_dining_black_48dp.png' : 'assets/img/md-images/ic_local_dining_black_24dp.png',
|
6 |
|
|
marker_size = isHighDensity() ? new google.maps.Size(48, 48) : new google.maps.Size(24, 24),
|
7 |
|
|
marker_scaled_size = new google.maps.Size(24, 24),
|
8 |
|
|
marker_zoom = 14,
|
9 |
|
|
LocsA = [
|
10 |
|
|
{
|
11 |
|
|
lat: 45.9,
|
12 |
|
|
lon: 10.9,
|
13 |
|
|
title: 'Title A',
|
14 |
|
|
html: [
|
15 |
|
|
'<div class="gmap-info-window">' +
|
16 |
|
|
'<h3 class="uk-text-nowrap">Heading A</h3>' +
|
17 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
18 |
|
|
'</div>'
|
19 |
|
|
].join(),
|
20 |
|
|
icon: {
|
21 |
|
|
url: marker_url_beenhere,
|
22 |
|
|
size: marker_size,
|
23 |
|
|
scaledSize: marker_scaled_size
|
24 |
|
|
}
|
25 |
|
|
},
|
26 |
|
|
{
|
27 |
|
|
lat: 44.8,
|
28 |
|
|
lon: 1.7,
|
29 |
|
|
title: 'Title B',
|
30 |
|
|
html: [
|
31 |
|
|
'<div class="gmap-info-window">' +
|
32 |
|
|
'<h3 class="uk-text-nowrap">Heading B</h3>' +
|
33 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
34 |
|
|
'</div>'
|
35 |
|
|
].join(''),
|
36 |
|
|
icon: {
|
37 |
|
|
url: marker_url_history,
|
38 |
|
|
size: marker_size,
|
39 |
|
|
scaledSize: marker_scaled_size
|
40 |
|
|
}
|
41 |
|
|
},
|
42 |
|
|
{
|
43 |
|
|
lat: 51.5,
|
44 |
|
|
lon: -1.1,
|
45 |
|
|
title: 'Title C',
|
46 |
|
|
icon: {
|
47 |
|
|
url: marker_url,
|
48 |
|
|
size: marker_size,
|
49 |
|
|
scaledSize: marker_scaled_size
|
50 |
|
|
},
|
51 |
|
|
html: [
|
52 |
|
|
'<div class="gmap-info-window">' +
|
53 |
|
|
'<h3 class="uk-text-nowrap">Heading C</h3>',
|
54 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
55 |
|
|
'</div>'
|
56 |
|
|
].join('')
|
57 |
|
|
}
|
58 |
|
|
],
|
59 |
|
|
LocsB = [
|
60 |
|
|
{
|
61 |
|
|
lat: 45.4654,
|
62 |
|
|
lon: 9.1866,
|
63 |
|
|
title: 'Milan, Italy',
|
64 |
|
|
html: [
|
65 |
|
|
'<div class="gmap-info-window">' +
|
66 |
|
|
'<h3 class="uk-text-nowrap">Milan, Italy</h3>',
|
67 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
68 |
|
|
'</div>'
|
69 |
|
|
].join('')
|
70 |
|
|
},
|
71 |
|
|
{
|
72 |
|
|
lat: 47.36854,
|
73 |
|
|
lon: 8.53910,
|
74 |
|
|
title: 'Zurich, Switzerland',
|
75 |
|
|
html: [
|
76 |
|
|
'<div class="gmap-info-window">' +
|
77 |
|
|
'<h3 class="uk-text-nowrap">Zurich, Switzerland</h3>',
|
78 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
79 |
|
|
'</div>'
|
80 |
|
|
].join('')
|
81 |
|
|
},
|
82 |
|
|
{
|
83 |
|
|
lat: 48.892,
|
84 |
|
|
lon: 2.359,
|
85 |
|
|
title: 'Paris, France',
|
86 |
|
|
html: [
|
87 |
|
|
'<div class="gmap-info-window">' +
|
88 |
|
|
'<h3 class="uk-text-nowrap">Paris, France</h3>',
|
89 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
90 |
|
|
'</div>'
|
91 |
|
|
].join('')
|
92 |
|
|
},
|
93 |
|
|
{
|
94 |
|
|
lat: 48.13654,
|
95 |
|
|
lon: 11.57706,
|
96 |
|
|
title: 'Munich, Germany',
|
97 |
|
|
html: [
|
98 |
|
|
'<div class="gmap-info-window">' +
|
99 |
|
|
'<h3 class="uk-text-nowrap">Munich, Germany</h3>',
|
100 |
|
|
'<p>Lorem ipsum dolor sit…</p>' +
|
101 |
|
|
'</div>'
|
102 |
|
|
].join('')
|
103 |
|
|
}
|
104 |
|
|
],
|
105 |
|
|
map_style_a = {
|
106 |
|
|
'Neutral Blue': [
|
107 |
|
|
{
|
108 |
|
|
"featureType": "water",
|
109 |
|
|
"elementType": "geometry",
|
110 |
|
|
"stylers": [{"color": "#193341"}]
|
111 |
|
|
}, {
|
112 |
|
|
"featureType": "landscape",
|
113 |
|
|
"elementType": "geometry",
|
114 |
|
|
"stylers": [{"color": "#2c5a71"}]
|
115 |
|
|
}, {
|
116 |
|
|
"featureType": "road",
|
117 |
|
|
"elementType": "geometry",
|
118 |
|
|
"stylers": [{"color": "#29768a"}, {"lightness": -37}]
|
119 |
|
|
}, {
|
120 |
|
|
"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}, {
|
121 |
|
|
"featureType": "transit",
|
122 |
|
|
"elementType": "geometry",
|
123 |
|
|
"stylers": [{"color": "#406d80"}]
|
124 |
|
|
}, {
|
125 |
|
|
"elementType": "labels.text.stroke",
|
126 |
|
|
"stylers": [{"visibility": "on"}, {"color": "#3e606f"}, {"weight": 2}, {"gamma": 0.84}]
|
127 |
|
|
}, {
|
128 |
|
|
"elementType": "labels.text.fill", "stylers": [{"color": "#ffffff"}]}, {
|
129 |
|
|
"featureType": "administrative",
|
130 |
|
|
"elementType": "geometry",
|
131 |
|
|
"stylers": [{"weight": 0.6}, {"color": "#1a3541"}]
|
132 |
|
|
}, {
|
133 |
|
|
"elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {
|
134 |
|
|
"featureType": "poi.park",
|
135 |
|
|
"elementType": "geometry",
|
136 |
|
|
"stylers": [{"color": "#2c5a71"}]
|
137 |
|
|
}
|
138 |
|
|
]
|
139 |
|
|
},
|
140 |
|
|
map_style_b = {
|
141 |
|
|
'Subtle Greyscale': [{
|
142 |
|
|
"featureType": "landscape",
|
143 |
|
|
"stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]
|
144 |
|
|
}, {
|
145 |
|
|
"featureType": "poi",
|
146 |
|
|
"stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility": "simplified"}]
|
147 |
|
|
}, {
|
148 |
|
|
"featureType": "road.highway",
|
149 |
|
|
"stylers": [{"saturation": -100}, {"visibility": "simplified"}]
|
150 |
|
|
}, {
|
151 |
|
|
"featureType": "road.arterial",
|
152 |
|
|
"stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]
|
153 |
|
|
}, {
|
154 |
|
|
"featureType": "road.local",
|
155 |
|
|
"stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]
|
156 |
|
|
}, {
|
157 |
|
|
"featureType": "transit",
|
158 |
|
|
"stylers": [{"saturation": -100}, {"visibility": "simplified"}]
|
159 |
|
|
}, {
|
160 |
|
|
"featureType": "administrative.province", "stylers": [{"visibility": "off"}]}, {
|
161 |
|
|
"featureType": "water",
|
162 |
|
|
"elementType": "labels",
|
163 |
|
|
"stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]
|
164 |
|
|
}, {
|
165 |
|
|
"featureType": "water",
|
166 |
|
|
"elementType": "geometry",
|
167 |
|
|
"stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]
|
168 |
|
|
}]
|
169 |
|
|
};
|
170 |
|
|
|
171 |
|
|
$(function() {
|
172 |
|
|
// google maps
|
173 |
|
|
altair_gmaps.gm_markers();
|
174 |
|
|
altair_gmaps.gm_route();
|
175 |
|
|
altair_gmaps.style_a();
|
176 |
|
|
altair_gmaps.style_b();
|
177 |
|
|
});
|
178 |
|
|
|
179 |
|
|
altair_gmaps = {
|
180 |
|
|
gm_markers: function() {
|
181 |
|
|
new Maplace({
|
182 |
|
|
locations: LocsA,
|
183 |
|
|
map_div: '#gmap_markers',
|
184 |
|
|
controls_title: 'Choose a location:',
|
185 |
|
|
listeners: {
|
186 |
|
|
idle: function() {
|
187 |
|
|
var mapDropown = $('#gmap_markers').find('.dropdown.gmap_controls').find('select');
|
188 |
|
|
if(mapDropown && !mapDropown.hasClass('data-md-selectize')) {
|
189 |
|
|
mapDropown.addClass('data-md-selectize');
|
190 |
|
|
altair_forms.select_elements();
|
191 |
|
|
}
|
192 |
|
|
}
|
193 |
|
|
}
|
194 |
|
|
}).Load();
|
195 |
|
|
|
196 |
|
|
},
|
197 |
|
|
gm_route: function() {
|
198 |
|
|
new Maplace({
|
199 |
|
|
locations: LocsB,
|
200 |
|
|
map_div: '#gmap_route',
|
201 |
|
|
generate_controls: false,
|
202 |
|
|
show_markers: false,
|
203 |
|
|
type: 'directions',
|
204 |
|
|
draggable: true,
|
205 |
|
|
directions_panel: '#route_directions',
|
206 |
|
|
afterRoute: function(distance) {
|
207 |
|
|
$('.route_km').text('('+(distance/1000)+'km)');
|
208 |
|
|
}
|
209 |
|
|
}).Load();
|
210 |
|
|
},
|
211 |
|
|
style_a: function() {
|
212 |
|
|
new Maplace({
|
213 |
|
|
map_div: '#gmap_style_a',
|
214 |
|
|
map_options: {
|
215 |
|
|
set_center: [37.390267, -122.076417],
|
216 |
|
|
zoom: 12,
|
217 |
|
|
streetViewControl: false
|
218 |
|
|
},
|
219 |
|
|
styles: map_style_a,
|
220 |
|
|
controls_on_map: false
|
221 |
|
|
}).Load();
|
222 |
|
|
},
|
223 |
|
|
style_b: function() {
|
224 |
|
|
new Maplace({
|
225 |
|
|
map_div: '#gmap_style_b',
|
226 |
|
|
map_options: {
|
227 |
|
|
set_center: [37.390267, -122.076417],
|
228 |
|
|
zoom: 12,
|
229 |
|
|
streetViewControl: false
|
230 |
|
|
},
|
231 |
|
|
draggable: true,
|
232 |
|
|
styles: map_style_b
|
233 |
|
|
}).Load();
|
234 |
|
|
}
|
235 |
|
|
};
|