0

I'm using jQuery mobile alongside the Google Maps API. I am creating an Google Elevation Chart for a route but I am struggling to get this to display full screen - it renders in the top left corner at 32px x 32px after assigning width, height 100% to the elevation chart elements.

I had a similar problem with my Google map to begin with and solved this by adding -

$('#home').live('pagecreate',function(event) {
        $("#btnSubmit").click( function (e) {
            initialize();
            $.mobile.changePage("#map-page");
        });
    });

Do I need to do something similar to get the Elevation chart to render correctly? I am unable to work out what to do.

Tom
  • 721
  • 3
  • 11
  • 28
  • Most likely the div that it is being displayed in doesn't have a size (you say it is 100%, but 100% of what?). Do all the parent elements have a size (that the browser knows about)? – geocodezip Oct 28 '12 at 17:44
  • I have tried that, assigning a fixed with to the outer container div and then also passing a width and height through the javascript properties for the chart - but no such luck. – Tom Oct 28 '12 at 17:55

0 Answers0