How to make the google map work like google map application in android phones

Question 1

At last I could fix the problem totally

Here is the script

<script type="text/javascript">          
/*
 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/


$( document ).on( "pageshow", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 

   $('#map-canvas').height( $(window).height() - $('#head1').height());
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            streetViewControl:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        // this is our gem
            google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center); 
        }); 
}       
}); 
$(window).bind( 'orientationchange', function(e){
          var ori = window.orientation ;
            w = (ori==90 || ori==-90) ? window.height : window.width;
            $('#map-canvas').width(w);
            $('#map-canvas').height( $(window).height() - $('#head1').height());    

    }); 
</script>

Now it centers Just like Google Map application in Android devices

Question 2

It was happening because My page had a header and the size of div with id #map-canvas was given equal to window size . If not given then its default I guess .

So I extracted the size of the header and minus it with the size of the window and set it to map-canvas.

Like this

 var  v = $( window ).height();
        h= $('#head1').height();
        v = v - h;
   $('#map-canvas').height(v);

or

$('#map-canvas').height( $(window).height() - $('#head1').height());

So my complete code looks something like this

<script type="text/javascript">          
/*
 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
$( document ).on( "pageshow", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 
   var  v = $( window ).height();
        h= $('#head1').height();
        v = v - h;
   $('#map-canvas').height(v);
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        $( window ).resize(function() {
       google.maps.event.trigger(map, 'resize');
                      });

        map.setCenter(defaultLatLng);
    }

}); 
</script>