http://www.nicespotshk.com/res/nsp.js

1
2// Call on on resize
3function onresizeCallBack( width, height ){	
4	var topH = $("#topdiv").height();
5	height = height - 60; // minus top padding
6	height = height - topH;
7	$("#left").css("height", (height) + "px");
8    $("#right").css("height", (height) + "px");
9    
10    if ( gmapMaxed ){
11    	$("#map_containerdiv").css("height", (height) + "px");
12    	$("#gmapdiv").css("height", (height) + "px");	  
13    }
14}
15
16// Map Function ==================================
17
18var gmapItemObjects = [];
19var gmapInfoWindows = [];
20var gmapMarkers = {};
21var gmap;
22var gmapLat = 0;
23var gmapLog = 0;
24var gmapZoom = 10;
25var gmapHideMarker = false;
26var gmapMaxed = false;
27// Change the size of map
28function gmapToggleSize(){	
29	/*
30	if ( $('#right').attr('class') == 'col-sm-8' ){		
31		$('#left').removeClass('col-sm-4');
32		$('#right').removeClass('col-sm-8')
33		$('#left').addClass('col-sm-2');
34		$('#right').addClass('col-sm-10');
35	} else{
36		$('#left').removeClass('col-sm-2');
37		$('#right').removeClass('col-sm-10')
38		$('#left').toggleClass('col-sm-4');
39		$('#right').toggleClass('col-sm-8');
40	}
41	*/
42	//$('#map_containerdiv').toggleClass('fullscreen');
43	//$('#gmapdiv').toggleClass('fullscreen');
44	if ( !gmapMaxed ){
45		gmapMaxed = true;
46		var leftH = $("#left").height();
47		leftH = leftH - 20;
48		$("#map_containerdiv").css("height", (leftH) + "px");
49		$("#gmapdiv").css("height", (leftH) + "px");			
50	}else{
51		gmapMaxed = false;
52		$("#map_containerdiv").css("height", "300px");
53		$("#gmapdiv").css("height", "300px");
54	}
55	google.maps.event.trigger(gmap,'resize');
56	//gmapZoomToDefault();
57}
58
59
60function gmapClearAllMarker(){
61	for ( var key in gmapMarkers ){
62		var marker = gmapMarkers[key];
63		marker.setMap(null);
64	}
65}
66function gmapShowMarker(key){	
67	
68	var marker = gmapMarkers[key];
69	var infowindow = null;	
70	if ( marker.infoWindow ){
71		
72		//gmapCloseAllInfoWindows();
73		
74		infowindow = marker.infoWindow;
75		// Open info window
76    	infowindow.open(gmap, marker);
77    	
78    	var latLng = marker.getPosition(); // returns LatLng object
79    	gmap.setCenter(latLng); // setCenter takes a LatLng object
80    	//gmap.setZoom( gmapZoom );
81    	
82	}
83}
84
85
86function initGMap( defaultLag, defaultLog ){
87	
88	// zoom to hong kong
89    gmap = new google.maps.Map(document.getElementById('gmapdiv'), {
90        center: {lat: defaultLag, lng: defaultLog},
91        zoom: gmapZoom,
92        fullscreenControl:true
93        //,styles: [{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#f1efe8"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"color":"#f1efe8"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#b2ac83"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#b2ac83"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#8ac0c4"}]}]
94        
95    });
96	
97    gmapAddCustomControls();
98	
99}
100
101function gmapAddSearchbox(){
102	
103	// Create the search box and link it to the UI element.
104    var input = document.getElementById('gmap-search-input');
105    var searchBox = new google.maps.places.SearchBox(input);
106    gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
107    // Bias the SearchBox results towards current map's viewport.
108    gmap.addListener('bounds_changed', function() {
109      searchBox.setBounds(gmap.getBounds());
110    });
111	
112    
113    searchBox.addListener('places_changed', function() {
114    
115    	 var places = searchBox.getPlaces();
116
117         if (places.length == 0) {
118           return;
119         }
120
121         //gmapClearAllMarker();
122
123         // For each place, get the icon, name and location.
124         var bounds = new google.maps.LatLngBounds();
125         
126         places.forEach(function(place) {
127           if (!place.geometry) {
128             console.log("Returned place contains no geometry");
129             return;
130           }
131           var icon = {
132             url: place.icon,
133             size: new google.maps.Size(71, 71),
134             origin: new google.maps.Point(0, 0),
135             anchor: new google.maps.Point(17, 34),
136             scaledSize: new google.maps.Size(25, 25)
137           };
138
139           // Create a marker for each place.           
140           var marker = new google.maps.Marker({
141             map: gmap,
142             icon: icon,
143             title: place.name,
144             position: place.geometry.location
145           });
146
147           if (place.geometry.viewport) {
148             // Only geocodes have viewport.
149             bounds.union(place.geometry.viewport);
150           } else {
151             bounds.extend(place.geometry.location);
152           }
153         });
154         
155         gmap.fitBounds(bounds);
156        
157    });
158    
159
160}
161
162// Add custom control to google map
163function gmapAddCustomControls() {
164	// Custom Controls
165    var centerControlDiv = document.createElement('div');
166    var centerControl = new gmapCenterControl(centerControlDiv, gmap);
167    centerControlDiv.index = 1;
168    gmap.controls[google.maps.ControlPosition.LEFT_TOP].push(centerControlDiv);
169    
170    var enlargeControlDiv = document.createElement('div');
171    var enlargeControl = new gmapEnlargeControl(enlargeControlDiv, gmap);
172    enlargeControlDiv.index = 2;
173    gmap.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(enlargeControlDiv);
174    
175    var markerControlDiv = document.createElement('div');
176    var markerControl = new gmapToggleMarkerControl(markerControlDiv, gmap);
177    markerControlDiv.index = 3;
178    gmap.controls[google.maps.ControlPosition.LEFT_TOP].push(markerControlDiv);   
179    
180}
181		
182
183function gmapEnlargeControl(controlDiv, map) {
184
185    // Set CSS for the control border.
186    var controlUI = document.createElement('div');
187    controlUI.style.backgroundColor = '#000000';
188    controlUI.style.opacity = 0.60;    
189    //controlUI.style.border = '1px solid #FBC52E';
190    controlUI.style.borderRadius = '2px';
191    controlUI.style.boxShadow = '0 0px 0px rgba(0,0,0,.2)';
192    controlUI.style.cursor = 'pointer';
193    controlUI.style.marginBottom = '15px';
194    controlUI.style.textAlign = 'center';
195    controlUI.title = 'Click to enlarge the map';
196    controlDiv.appendChild(controlUI);
197
198    // Set CSS for the control interior.
199    var controlText = document.createElement('div');
200    
201    controlText.style.color = '#FFFFFF';    
202    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
203    controlText.style.fontWeight = 'normal';
204    controlText.style.fontSize = '10pt';
205    controlText.style.lineHeight = '20pt';
206    controlText.style.paddingLeft = '7px';
207    controlText.style.paddingRight = '7px';
208    
209    // Double Click to Enlarge Map
210    controlText.innerHTML = '雙擊放大地圖';
211    controlUI.appendChild(controlText);
212
213    // Setup the click event listeners: simply set the map to Chicago.
214    controlUI.addEventListener('click', function() {
215    	gmapToggleSize();
216    });
217    
218    
219}
220
221function gmapCenterControl(controlDiv, map) {
222
223    // Set CSS for the control border.
224    var controlUI = document.createElement('div');
225    controlUI.style.backgroundColor = '#FFFFFF';
226    controlUI.style.border = '1px solid #fff';
227    controlUI.style.borderRadius = '2px';
228    controlUI.style.boxShadow = '0 1px 1px rgba(0,0,0,.2)';
229    controlUI.style.cursor = 'pointer';
230    controlUI.style.marginLeft = '10px';
231    controlUI.style.textAlign = 'center';
232    controlUI.title = 'Click to recenter the map';
233    controlDiv.appendChild(controlUI);
234
235    // Set CSS for the control interior.
236    var controlText = document.createElement('div');
237    
238    controlText.style.color = 'rgb(25,25,25)';    
239    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
240    //controlText.style.fontSize = '9pt';
241    controlText.style.lineHeight = '18pt';
242    controlText.style.paddingLeft = '7px';
243    controlText.style.paddingRight = '7px';
244    
245    controlText.innerHTML = '至中';
246    controlUI.appendChild(controlText);
247
248    // Setup the click event listeners: simply set the map to Chicago.
249    controlUI.addEventListener('click', function() {
250      var pos = {lat: gmapLat/1, lng: gmapLog/1};
251      gmap.setCenter(pos);      
252      gmap.setZoom(gmapZoom);
253    });
254}
255
256function gmapToggleMarkerControl(controlDiv, map) {
257
258    // Set CSS for the control border.
259    var controlUI = document.createElement('div');
260    controlUI.style.backgroundColor = '#FFFFFF';
261    controlUI.style.border = '1px solid #fff';
262    controlUI.style.borderRadius = '2px';
263    controlUI.style.boxShadow = '0 1px 1px rgba(0,0,0,.2)';
264    controlUI.style.cursor = 'pointer';
265    controlUI.style.marginTop = '10px';
266    controlUI.style.marginLeft = '10px';
267    controlUI.style.textAlign = 'center';
268    controlUI.title = 'Click to recenter the map';
269    controlDiv.appendChild(controlUI);
270
271    // Set CSS for the control interior.
272    var controlText = document.createElement('div');
273    
274    controlText.style.color = 'rgb(25,25,25)';    
275    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
276    //controlText.style.fontSize = '9pt';
277    controlText.style.lineHeight = '18pt';
278    controlText.style.paddingLeft = '7px';
279    controlText.style.paddingRight = '7px';
280    
281    controlText.innerHTML = '標記';
282    controlUI.appendChild(controlText);
283
284    controlUI.addEventListener('click', function() {
285      // Show or hide all markers
286    	if ( gmapHideMarker ){
287    		gmapHideMarker = false;

288    		gmapShowAllInfoWindows();
289    	}else{
290    		gmapHideMarker = true;
291    		gmapCloseAllInfoWindows();
292    	}
293    });
294}
295
296function gmapCloseAllInfoWindows() {
297  for (var i=0;i<gmapInfoWindows.length;i++) {
298	gmapInfoWindows[i].close();
299  }
300}
301
302function gmapShowAllInfoWindows() {
303  for (var i=0;i<gmapInfoWindows.length;i++) {	  
304	gmapInfoWindows[i].open( gmap, gmapInfoWindows[i].marker );
305  }
306}
307
308function gmapZoomToDefault(){
309	gmapZoomTo(gmapLat, gmapLog, gmapZoom);
310}
311
312function gmapZoomTo(lat, lng, zoomLevel)
313{	
314	var myLatlng = new google.maps.LatLng(lat,lng);        	
315	var pinColor = "0066FF";
316	var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
317	    new google.maps.Size(21, 34),
318	    new google.maps.Point(0,0),
319	    new google.maps.Point(10, 34));
320	
321	/*
322	var marker = new google.maps.Marker({
323	      position: myLatlng,
324	      map: gmap,
325	      draggable:true, 
326	      icon: pinImage,
327	      title: 'Main'
328	});    	
329	markers.push( marker );
330	*/
331	var zoom = zoomLevel / 1;
332	gmap.setCenter(myLatlng);
333	gmap.setZoom( zoom );
334	
335	//gmapShowAllInfoWindows();
336}
337function gmapAddMakertoMapCallback(infowindow, gmap, marker){
338	//infowindow.open(gmap, marker);
339}
340function gmapAddMakertoMap( i, item ){
341	
342	// Take first
343	if ( gmapLat == 0 ){
344		gmapLat = item.lat; 
345		gmapLog = item.log;
346	}
347	
348    var myLatlng = new google.maps.LatLng(item.lat, item.log);
349
350    var marker = new google.maps.Marker({
351        position: myLatlng,
352        map: gmap,
353        icon: 'img/mapmarker.png',
354        /*animation: google.maps.Animation.DROP,*/
355        title: item.name, 
356        
357        // attach the obj with the marker
358        itemObj : item
359    });
360    
361    //alert( item.photoUrl );
362    
363    // info window
364    
365    // '<img src="' + marker.itemObj.photoUrl + '=s50"  >' +
366    var contentString = '<div>' +
367	'<div>' +                    
368        '<div class="content">' +
369      		'<a target="app" href="/items/' + marker.itemObj.itemKey + '.html">' +
370            '<div class="header">' + marker.itemObj.name + '</div>' +
371          	'</a>' +
372        '</div>' + 
373    '</div></div>';
374        
375    contentString = '<div>' +
376	'<div>' +
377        '<img src="' + marker.itemObj.photoUrl + '=s80"  >' +
378        '<div class="content">' +
379      		'<a href="items/' + marker.itemObj.itemKey + '.html">' +
380            '<div class="header">' + marker.itemObj.name + '</div>' +
381          	'</a>' +
382        '</div>' + 
383    '</div></div>';
384    
385 	
386	var infowindow = null;            	
387	if ( marker.infoWindow ){                    		
388		infowindow = marker.infoWindow;                    		
389	}else{
390		infowindow = new google.maps.InfoWindow({
391		    content: contentString
392		});
393		gmapInfoWindows.push(infowindow);
394		marker.infoWindow = infowindow;
395	}
396    
397	//infowindow.open(gmap, marker);
398	//infowindow.close(gmap, marker);
399	//infowindow.pixelOffset = new google.maps.Size(100, 100, 'px', 'px');
400	infowindow.setPosition( myLatlng );
401	
402	gmapAddMakertoMapCallback(infowindow, gmap, marker);
403    // Save the markers
404    gmapMarkers[item.itemKey] = marker;
405
406    
407    //alert( gmapMarkers[itemObj.itemKey] );
408    
409    // listen to marker click event
410    google.maps.event.addListener(marker, 'click', function() {
411    	
412    	// Close all before open one
413    	gmapCloseAllInfoWindows();
414    	
415    	// Open info window
416    	marker.infoWindow.open(gmap, marker);                    	
417    	
418    	if ( gmapOnclickMarker ) gmapOnclickMarker( marker );
419    	/*
420    	// Zoom to element
421        var elem = $('#' + item.itemKey);        
422        if ( elem && $('#left') ){
423        	$('#left').animate({
424                scrollTop: elem.offset().top - 100
425            }, 50 );
426            
427            // Highlish
428            //elem.css("border","1px solid #2D6780");
429            elem.css("backgroundColor","yellow");
430            
431            setTimeout(function(){
432            	//elem.css("border","0px");
433            	elem.css("backgroundColor","white");
434			},1000)	
435        }
436        */
437        
438        
439    });
440}
441
442
443/* plan functions */
444function addToPlan( itemkey, tripIndex ){
445	
446	// Test Appending 
447	//var table = $('<table></table>').addClass('foo');
448	//for(i=0; i<3; i++){
449	//   var row = $('<tr></tr>').addClass('bar').text('result ' + i);
450	//    table.append(row);
451	//}
452	//$('#here_table').append(table);
453	//<div id="here_table"></div>
454	
455	// Add a spot to a plan	
456	var url = '/tripplan/?cmd=additemtoplan&item=' + itemkey + '&tripindex=' + tripIndex;
457	$.ajax(url + '&isajax=1' , {
458	      success: function(data) {
459	    	  var msgObj = $.parseJSON(data);
460	    	  //var msgObj = { titestr :'ADDED to plan', content: 'Successfully.' };	    	  
461			  showMsg(msgObj);
462	      },
463	      error: function() {
464	    	  var msgObj = { titestr :'Failed', content: 'Operation failed.' };	    	  
465	    	  showErrorMsg(msgObj);
466	      }
467	   });
468}
469
470
471function ajaxCall( url ){
472	$.ajax(url + '&isajax=1' , {
473      success: function(data) {
474    	  //alert(data);
475    	  //var responseTxt = transport.responseText || "no response text";
476    	  //alert(data);
477		  showMsg(data);
478      },
479      error: function() {

480    	  alert('Something went wrong... in the ajax update');
481      }
482   });
483}
484
485
486
487function showMsg( msgObj ){
488	// Show Message Modeal
489	$('#msg_title_str').html(msgObj.titestr);
490	$('#msg_content').html(msgObj.content);
491	$('#msg_content').addClass("alert-success");
492	
493	$('#myModal').modal('show')
494	//$('#message_box').show();		
495	setTimeout(closeMsg, 1500);		
496}
497function showErrorMsg( msgObj ){
498	// Show Message Modeal
499	$('#msg_title_str').html(msgObj.titestr);
500	$('#msg_content').html(msgObj.content);
501	$('#msg_content').addClass("alert-danger");
502	
503	$('#myModal').modal('show')
504	//$('#message_box').show();		
505	setTimeout(closeMsg, 1500);		
506}
507function closeMsg(){		
508	//$('#message_box').hide();
509	$('#myModal').modal('hide')
510}
511
512
513
514function backToTop(){
515	window.scrollTo(0, 0);	
516}    
517function backToTopDiv(){    	
518	if ( $('#left') ) {
519    	$('#left').animate({
520            scrollTop: 0
521        }, 20 );	
522    }	
523}
524
525// Onclick a marker
526function gmapOnclickMarker( marker ){
527	var item = marker.itemObj;				    	
528	$("#listingfilter").val( item.name );    	
529	filterItem();
530}
531
532function filterItem() {    	
533	var filterTxt = $('#listingfilter').val().toLowerCase();;
534	var count = 0;    	
535  	    $(".itemdiv").each(function () {
536  	    	//alert($(this).text());
537  	        var parent = $(this).parent();
538  	        var txt = $(this).text().toLowerCase();;		        	        
539  	        var isFound = true;
540  	        // filter checkbox
541  	        $(".filter-toggle").each(function () {	        	    		
542    		// id = filter_+hashtag
543    		var hashtag = $(this).attr('id').replace('filter_', '');				        		
544    		var bChecked = $(this).is(":checked");
545    		if ( bChecked ){
546   	        	if ( !(txt.search('#' + hashtag ) >= 0) ){
547   	        		isFound = false;
548   	        	};	
549   	        }
550  	    	});		        	        
551  	        // Search text
552  	        if ( filterTxt.length > 0 ){		        	    	
553  	    	    isFound = (txt.search(filterTxt) >= 0);
554  	        }		        	        
555  	        if ( isFound ){        	        	
556  	         	$(this).show();
557  	         	count++;
558  	        }else{
559  	         	$(this).hide();
560  	        }
561  	     // Set number of item matach
562   	    //$("#filter-count").text(count);					        	
563  	    });				    	
564  	    //loadGMapMarkers();				    	
565}
566
567function categoryPageInit(){
568	$(".filter-toggle").each(function () {		        		
569   		$(this).change(function() {							
570			filterItem( );
571		    loadGMapMarkers();
572	    })
573 	 });
574    $("#listingfilter").keyup(function () {
575		filterItem( );
576 	    	});
577    $("#filter_clear").click(function () {
578    	$("#listingfilter").val('');
579		filterItem( );
580	});
581}
582
583function loadGMapMarkers( gmapItemObjects ) {        
584	gmapClearAllMarker();
585	for (var i=0;i<gmapItemObjects.length;i++) {
586		var itm = gmapItemObjects[i];
587		var txt = itm.tag;
588		var isFound = true;
589		$(".filter-toggle").each(function () {	        	    		
590    		// id = filter_+hashtag
591    		var hashtag = $(this).attr('id').replace('filter_', '');				        		
592    		var bChecked = $(this).is(":checked");
593    		if ( bChecked ){
594	        	if ( !(txt.search('#' + hashtag ) >= 0) ){
595	        		isFound = false;
596	        	};	
597	        }
598    	});        		
599		if ( isFound ){
600			if ( itm.lat.length > 0 ){
601				gmapAddMakertoMap( i, itm );	
602			}        				
603		}
604	}     	
605}