Forum | Appery.io

I have a Google Map that displays just fine on a phone and when it was defined in the Tiggzi environment, it took on the size of a phone in portrait mode.

I want to be able to take advantage of more room on the screen for larger resolution tablets and even landscape orientation. I know how much room I need for non-map items (logo, buttons, etc) - how do I resize the map so it takes advantage of the larger screen?

Hello!

$("[dsid='googlemap1']").width(500)

googlemap1 - component name

The same for height

then make refresh Tiggr('googlemap1').refresh

As always - right on the money - thanks!

Your method is correct, but there's a small side effect in the Tiggzi environment. That is, when I want to test the app via the browser, the phone screen is shown with an overlay and it's just an iframe inside that (to emulate what you would see on a phone/tablet in portrait/landscape modes).

The problem is that the screen.availHeight method I'm using reads my PC's browser height and concludes that the screen is really large - so it's distorted in the Tiggzi browser-based Tester.

Suggestions? I could disable it for browser testing... or is there a method that gets the size of the screen (iframe in the case of the Tiggzi browser tester) and still the proper size on a mobile device?

Or is this just a side effect to live with?

There are methods window.innerWidth and window.innerHeight, but not sure how it would work on device.

Those didn't work as well as outerWidth and just width - I believe I have to use availWidth and just live with the side effect when testing (or just modify the javascript during the test period).

Anyway - my main question above was answered - thanks.

Actually - I can now fix myself.

In both the Tiggzi test environment AND on the device, we should be using

$(window).height()

For example, I wanted to allow for 220 pixels above and below the Google map for graphics, buttons, etc. So I just calculate:

    var myHeight = $(window).height() - 220; 

and then resize the Google map's height to be:

    $("[dsid='googlemap1']").height(myHeight); 

Silly of me to use other "screen" methods.

Marina - thanks for your help...

That helped me. Thks