Sunday, December 18, 2011

Accepting only Numeric data in a text field.

<script>

function isNumber(evt)
{
   var charCode = (evt.which) ? evt.which : event.keyCode
  
   if(parseInt(charCode) >= 48)
   {
         if(!(parseInt(charCode) >= 57))
         {
           return true;
         }
         return false;
   } 
     
      //Accept backspace in case u want to deleted the entered data.
   else if(parseInt(charCode) == 8)
   {
     return true;
   }
   else
   {
     return false;
   }
}

</script>

<input type="text" name="zipCode" id="zipCode" onkeypress="return isNumber(event);" />

Searching a particular address using google maps in javascript


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<article>
<p><span class="contentsmall">Finding the selected branch:</span><span class="contentsmall" id="status">checking...</span></p>
</article>

<script>
var geocoder;
var map;
function initialize()
{
//You can initialize the address you want search on google maps here. You can fetch the address through query string or hidden fields on your page.

  finalAddress=”Mumbai , Bandra (E)”;
}

 geocoder = new google.maps.Geocoder();

 if (geocoder)
 {
  geocoder.geocode( { 'address': finalAddress}, function(results, status)
   {
     if (status == google.maps.GeocoderStatus.OK)
     {
       var s = document.querySelector('#status');  
 
      if (s.className == 'success')
      {   
            return; 
      }   
         
      s.innerHTML = "found"; 
      s.className = 'success';  
          
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'map_canvas'; 
      mapcanvas.style.height = '350px'; 
      mapcanvas.style.width = '330px';   

      document.querySelector('article').appendChild(mapcanvas);
       
      var myOptions = {
          zoom: 15,
          panControl: true,
          scaleControl: true,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var marker = new google.maps.Marker({
           map: map,
           position: results[0].geometry.location
       });
     }
     else
     {
       alert("Geocode was not successful for the following reason: " +status);
     }
   });
 }
}

function error(msg)
{ 
      var s = document.querySelector('#status'); 
      s.innerHTML = typeof msg == 'string' ? msg : "failed"; 
      s.className = 'fail';   
}

initialize();
</script>

Implement "Locate Me" feature using google maps.


//This code implements the “Locate Me” feature using google maps for mobile applications. It works //perfectly fine on mobile simulators.

<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>

<article>
<p><spanclass="contentsmall">Finding your location:</span><span class="contentsmall" id="status">checking...</span></p>
</article>

<script>
function success(position)
{
vars = document.querySelector('#status');
if(s.className == 'success')
{
return;
}

s.innerHTML = "found you!";
s.className = 'success';

var mapcanvas = document.createElement('div');
mapcanvas.id ='mapcanvas';
mapcanvas.style.height = '350px';
mapcanvas.style.width = '330px';

document.querySelector('article').appendChild(mapcanvas);

var latlng = newgoogle.maps.LatLng(position.coords.latitude, position.coords.longitude);

//You can use hardcoded values as shown below for testing purpose.
//var latlng = new google.maps.LatLng(19.1242244, 72.8772207);

var myOptions ={
zoom: 15,
center: latlng,
panControl: true,
scaleControl:true,
zoomControl:true,
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
mapTypeControl:true,
navigationControl:true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = newgoogle.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = newgoogle.maps.Marker({
position: latlng,
map: map,
title:"You are here!" });
}


Function error(msg)
{
vars = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
}


if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error('not supported');
}
</script>

This is how the ouput will look on any mobile simulator.