Posts

Showing posts from 2014

Google map API using MarkerClusterer and Geocoder

Image
This is the Tutorial or code which helps to make Google map using Marker Clusterer and Geocoder for programmer. Many Website uses Google map with lots of marker with it but it doesn't look nice and perfect. To display nice Google map in your website, you need to add Marker Clusterer. Marker Clusterer merges the collection of marker in one images with number in the marker. This is the code: First of all, We need Style of the body. Copy following code for the style. <style type="text/css"> html{ height: 100%;} body{ height: 100%; margin: 0; padding: 0} #map-canvas{ height: 100%} </style> Secondly, You need to copy the following javascript code to access Google map. Here I have called google map API and also called google map utility library and lastly jQuery. initialize() function only initializes the google map view with center in "LeighLab" <script type="text/javascript"  src="https://maps.google
Post a Comment
Read more...

Display time according to the timezone using Javascript.

I have got many query that many people are confuse to get the local time zone using JavaScript as server are mainly saves in UTC or GMT time. If you are using ajax which gives time but the time you get is of server time like, jQuery.post("link",{para meter} ,function(data){ var time=data; <!-----data may be the time-----> var t= time.split(/[- :]/); <!------first split the time -----> var change = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]); var nowUtc = new Date( change.getTime() -((change.getTimezoneOffset()*60000)) ); <!--change.getTimezoneOffset() gives the local time different i.e. if you are at Kathmandu, the time different is +5:45, this gives 345min--> var final_hr=nowUtc.getHours(); var final_min=nowUtc.getMinutes(); //for minute i.e. from 1-9 placing '0' in front if(final_min.toString().length==1){var minute='0'+final_min;} else{var minute=final_min;} //for date var date=nowUtc.getDate(); //for date suffix if (da
Post a Comment
Read more...

Google map API to bound beyond poles.

I have found that many Google map in Website used the default map.This default Google map goes beyond the poles while dragging up and down. I have found the code that doesn't exceed the pole while dragging. Just paste the following code inside you intialize() function of the Google map: google.maps.event.addListener(map, 'center_changed', function() {checkBounds(); }); var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-66.85200239592201, -179.66565397011107), new google.maps.LatLng(66.903255924231566, 179.57922246681517)); function checkBounds() {           if(allowedBounds.contains(map.getCenter())) {             return;           }           var mapCenter = map.getCenter();           var X = mapCenter.lng();           var Y = mapCenter.lat();           var AmaxX = allowedBounds.getNorthEast().lng();           var AmaxY = allowedBounds.getNorthEast().lat();           var AminX = allowedBounds.getSouthWest().lng();           var AminY = allowedBo
Post a Comment
Read more...

Backend/ Admin page-Table display with added features

I have seen many people used to code themselves for the backend table. As they don't know that there are many plugins for the table for the Backend or Admin page. I also used to program myself but It took lot of time. I have researched to accomplish these things for less and fast time to program. Datatable.js is the best way to use the table display in the Backend / Admin page. This js has features of sorting, pagination and searching Tutorial for the data table. First of all, we need JAVASCRIPT and CSS files.  Download Place this inside <head> tag. <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dataTables.js"></script> Now the javascript code. place this code anywhere inside body. <script>         $(function() {         $('#example').dataTable();         } ); </script> Now just paste the code below <
Post a Comment
Read more...