jQuery Mobile and Google maps plugin get directions bounds fine in safari but don't work in standalone version

Question

I'm using jQuery Mobile and the Google maps jQuery plugin to ge a route from A to B this works fine in safari on the iPhone but when I make it a standalone version (ie. add to my homescreen) the map once genreted has the two markers and tyhe route but is not zoomed in to the bounds of the markers like it is in safari. If I run domap() on a button click it works fine in the standalone version. How do I get it to zoom to the bounds in the dtandalone version when the page loads?

html

    <div id="map_canvas" style="height:250px;width:100%;"></div>    
    <div data-role="content" style="padding-top:0;">    
        <a href="#" id="domap" data-icon="refresh" data-iconpos="notext" data-role="button" style="float:right;">reset map</a><br clear="all" />
        <div data-role="collapsible"  data-theme="a" data-content-theme="c" data-collapsed="false">
           <h3>Directions</h3>
           <p id="directions"></p>
        </div>
    </div>

jQuery code

$('#map').live("pagecreate", function() {
    domap();
});

$('#domap').click(function() {
    domap();                             
});

function domap(){
    var mobileMap = { 'center': '50.873422,0.011096'};

    $('#map_canvas').gmap('getCurrentPosition', function(position, status) {
        if ( status === 'OK' ) {

            var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var destination = new google.maps.LatLng('50.873422','0.011096');


            $('#map_canvas').gmap('displayDirections', {
                'origin': clientPosition,
                'destination': destination,
                'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 
                'panel': document.getElementById('directions')
                }, function(success, response) {
                if ( !success ) {
                    $('#map_canvas').gmap('getService', 'DirectionsRenderer').setMap(null);
                }
            });  
        }
    });      
}

Answer 1

I'm not familiar with the Google Maps jQuery plugin, but with the standard API you need to create a LatLngBounds() object and use .fitBounds() on the map object.

Script:

var bounds = new google.maps.LatLngBounds(),
    map = new google.maps.Map( mapCanvas, options ); //your map object here

bounds.extend( clientPosition );
bounds.extend( destination );
map.fitBounds( bounds );