https://urjadelhi.org/wp-content/plugins/nd-shortcodes/addons/locations/js/speed_test.js

1/**
2 * @fileoverview This demo is used for MarkerClusterer. It will show 100 markers
3 * using MarkerClusterer and count the time to show the difference between using
4 * MarkerClusterer and without MarkerClusterer.
5 * @author Luke Mahe (v2 author: Xiaoxi Wu)
6 */
7
8function $(element) {
9  return document.getElementById(element);
10}
11
12var speedTest = {};
13
14/*var MY_MAPTYPE_ID = 'custom_style';
15var nd_options_center_map = new google.maps.LatLng(34.263079, 16.993682);*/
16
17speedTest.pics = null;
18speedTest.map = null;
19speedTest.markerClusterer = null;
20speedTest.markers = [];
21speedTest.infoWindow = null;
22
23speedTest.init = function() {
24  var latlng = new google.maps.LatLng(39.91, 116.38);
25  
26  /*var options = {
27    'zoom': 2,
28    'center': nd_options_center_map,
29    'mapTypeId': MY_MAPTYPE_ID
30  };*/
31
32  speedTest.map = new google.maps.Map($('map'), options);
33
34
35
36  //custom zoom map
37  if(  document.getElementById("nd_options_gmaps_plus") ){
38       google.maps.event.addDomListener(document.getElementById("nd_options_gmaps_plus"), "click", function () {      
39         var current= parseInt( speedTest.map.getZoom(),10);
40         current++;
41         if(current>20){
42             current=20;
43         }
44         speedTest.map.setZoom(current);
45      });  
46  }
47      
48      
49  if(  document.getElementById("nd_options_gmaps_minus") ){
50       google.maps.event.addDomListener(document.getElementById("nd_options_gmaps_minus"), "click", function () {      
51         var current= parseInt( speedTest.map.getZoom(),10);
52         current--;
53         if(current<0){
54             current=0;
55         }
56         speedTest.map.setZoom(current);
57      });  
58  }
59  //end custom zoom map
60
61
62
63
64  //custom style
65//start snazzy options
66    
67    //end snazzy options
68
69
70  var styledMapOptions = { name: 'Custom Style'};
71  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
72  speedTest.map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
73  //end custom style
74
75
76
77
78
79  speedTest.pics = data.photos;
80  
81  var useGmm = document.getElementById('usegmm');
82  google.maps.event.addDomListener(useGmm, 'click', speedTest.change);
83  
84  var numMarkers = document.getElementById('nummarkers');
85  google.maps.event.addDomListener(numMarkers, 'change', speedTest.change);
86
87  speedTest.infoWindow = new google.maps.InfoWindow();
88
89
90
91
92  speedTest.showMarkers();
93};
94
95speedTest.showMarkers = function() {
96  speedTest.markers = [];
97
98  var type = 1;
99  if ($('usegmm').checked) {
100    type = 0;
101  }
102
103  if (speedTest.markerClusterer) {
104    speedTest.markerClusterer.clearMarkers();
105  }
106
107  var panel = $('markerlist');
108  panel.innerHTML = '';
109  var numMarkers = $('nummarkers').value;
110
111  for (var i = 0; i < numMarkers; i++) {
112    var titleText = speedTest.pics[i].photo_title;
113    if (titleText == '') {
114      titleText = 'No title';
115    }
116
117    var item = document.createElement('DIV');
118    var title = document.createElement('A');
119    title.href = '#';
120    title.className = 'title';
121    title.innerHTML = titleText;
122
123    item.appendChild(title);
124    panel.appendChild(item);
125
126
127    var latLng = new google.maps.LatLng(speedTest.pics[i].latitude,
128        speedTest.pics[i].longitude);
129
130    //var markerImage = new google.maps.MarkerImage("http://localhost/themeforest/love-travel/wp-content/themes/weddingindustry/img/gmaps/marker.png", null, null, null, new google.maps.Size(45,45));
131
132    var marker = new google.maps.Marker({
133      'position': latLng,
134      'icon': markerImage
135    });
136
137    var fn = speedTest.markerClickFunction(speedTest.pics[i], latLng);
138    google.maps.event.addListener(marker, 'click', fn);
139    google.maps.event.addDomListener(title, 'click', fn);
140    speedTest.markers.push(marker);
141  }
142
143  window.setTimeout(speedTest.time, 0);
144};
145
146speedTest.markerClickFunction = function(pic, latlng) {
147  return function(e) {
148    e.cancelBubble = true;
149    e.returnValue = false;
150    if (e.stopPropagation) {
151      e.stopPropagation();
152      e.preventDefault();
153    }
154
155    //parameter from json
156    var title = pic.photo_title;
157    var url = pic.photo_url;
158
159    var location_title = pic.locations_title;
160    var location_subtitle = pic.locations_subtitle;
161    var location_description = pic.locations_description;
162
163    /*var infoHtml_old = '<div class="info"><h3>' + title +
164      '</h3><div class="info-body">' +
165      '<a href="' + url + '" target="_blank"><img src="' +
166      fileurl + '" class="info-img"/></a></div>' +
167      '<br/>' +
168      '</div></div>';*/
169
170    //var infoHtml = '<div style="width:300px; min-height:200px;" class="nd_options_focus"><div style="float:left; width:100%; padding:0px; box-sizing:border-box;" class="nd_options_center"><img class="nd_options_focus" src="'+ url +'"><div class="nd_options_space20"></div><h4 class="center">

170'+ title +'</h4><div class="nd_options_space20"></div><a href="http://localhost/themeforest/love-travel/index.php/locations/venice/" class="nd_options_border_grey grey nd_options_btn nd_options_outline medium ">DETAILS</a><div class="nd_options_space10"></div></div></div>';
171
172    var infoHtml = '<div class="nd_options_section"><div class="nd_options_float_left nd_options_width_50_percentage nd_options_box_sizing_border_box"><img style="" class="nd_options_section" src="'+ url +'"></div><div style="padding-left:45px; float:right !important;" class="nd_options_box_sizing_border_box nd_options_width_50_percentage nd_options_text_align_center"><div class="nd_options_section nd_options_height_15"></div><h4><strong>'+ location_title +'</strong></h4><div class="nd_options_section nd_options_height_20"></div><h5>'+ location_subtitle +'</h5><div class="nd_options_section nd_options_height_20"></div><div class="nd_options_section nd_options_line_height_0"><span class="nd_options_height_2 nd_options_width_30 nd_options_display_inline_block nd_options_bg_grey"></span></div><div class="nd_options_section nd_options_height_20"></div><p>'+ location_description +'</p></div></div>';
173
174    speedTest.infoWindow.setContent(infoHtml);
175    speedTest.infoWindow.setPosition(latlng);
176    speedTest.infoWindow.open(speedTest.map);
177
178
179  };
180};
181
182speedTest.clear = function() {
183  $('timetaken').innerHTML = 'cleaning...';
184  for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
185    marker.setMap(null);
186  }
187};
188
189speedTest.change = function() {
190  speedTest.clear();
191  speedTest.showMarkers();
192};
193
194speedTest.time = function() {
195  $('timetaken').innerHTML = 'timing...';
196  var start = new Date();
197  if ($('usegmm').checked) {
198    speedTest.markerClusterer = new MarkerClusterer(speedTest.map, speedTest.markers);
199  } else {
200    for (var i = 0, marker; marker = speedTest.markers[i]; i++) {
201      marker.setMap(speedTest.map);
202    }
203  }
204
205  var end = new Date();
206  $('timetaken').innerHTML = end - start;
207};