Как вы видите на картинке ниже, карта отображается только в верхнем левом углу. Ее можно перетаскивать по всему экрану, но она вернется к этому квадрату и будет отображаться только там.

Плагин, упомянутый в заголовке:Полуофициальный плагин jquery

Вот я и думаю, как это исправить?

Под картинкой вы найдете мой html, список плагинов и код js.

HTML/JSP:(Следует упомянуть, что это второй.jsp в моем приложении, поэтому, надеюсь, он должен инициализироваться в методе pageinit )

 

     
         
         
        
     
     
        
        


            

                
Header
            

            
   
                


            

        

    

. ПЛАГИНЫ:

Mapmode.js:

var mapdata = {
    destination: new google.maps.LatLng(59.3327881, 18.064488100000062)
};

$(document).on("pageinit", "#mapmode", function(event) {
    initMapMode();
    document.getElementById("map_canvas").style.height=$(window).height();
    document.getElementById("map_canvas").style.width=$(window).width();
    //Create the map then make 'displayDirections' request
    $('#map_canvas').gmap({
        'center' : mapdata.destination, 
        'mapTypeControl' : true, 
        'navigationControl' : true,
        'navigationControlOptions' : {
            'position':google.maps.ControlPosition.LEFT_TOP
        }
    })
   .bind('init', function() {
        $('.refresh').trigger('tap');        
    });
});

$('#mapmode').on("pageshow", function() {
    $('#map_canvas').gmap('refresh');
});

function initMapMode(){
    initPageHeader();
    initMapModeContent();
}

function initMapModeContent(){
}

function fadingMsg (locMsg) {
    $("
" + locMsg + "
")
   .css({
        "display": "block", 
        "opacity": 0.9, 
        "top": $(window).scrollTop() + 100
    })
   .appendTo( $.mobile.pageContainer )
   .delay( 2200 )
   .fadeOut( 1000, function(){
        $(this).remove();
    });
}

// Request display of directions, requires jquery.ui.map.services.js
var toggleval = true; // used for test case: static locations
$('.refresh').live("tap", function() {
    // START: Tracking location with test lat/long coordinates
    // Toggle between two origins to test refresh, force new route to be calculated
    var position = {};
    if (toggleval) {
        toggleval = false;
        position = {
            coords: {
                latitude: 57.6969943, 
                longitude: 11.9865
            }
        }; // Gothenburg
    } else {
        toggleval = true;
        position = {
            coords: {
                latitude: 58.5365967, 
                longitude: 15.0373319
            }
        }; // Motala
    }
    $('#map_canvas').gmap('displayDirections', 
    {
        'origin' : new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
        'destination' : mapdata.destination, 
        'travelMode' : google.maps.DirectionsTravelMode.DRIVING
    },
    {
        'panel' : document.getElementById('dir_panel')
    },
    function (result, status) {
        if (status === 'OK') {
            var center = result.routes[0].bounds.getCenter();
            $('#map_canvas').gmap('option', 'center', center);
            $('#map_canvas').gmap('refresh');
        } else {
            alert('Unable to get route');
        }
    }); 
    // END: Tracking location with test lat/long coordinates
    $(this).removeClass($.mobile.activeBtnClass);
    return false;
});

функция initpageheader:

function initPageHeader(){
    //TODO getdata with the id(page we are currently on).
    $("#header").html(function(index, originalMarkup) {
        return ''+
        ''+
        '
'+
        ''+
        '
'+
        ''+
        ''+
        '';
    });
}