What is the best way to show a full-screen google map on both iPad and iPhone and even when the orientation changed as well.
Edit: I'm implementing mobile application in jQuery mobile. not iOS application.
Thanks.
Basically Google Mps API renders the map into an div(some cases in an iframe). Anyway you should specify an div to be your Map Canvas. if you change size of the div, then size of the map will change.
So if you define width and height of the canvas to 100%, it will always show the map covering whole screen.
#mapCanvas{
width:100%;
height:100%;
}
You need to create what is called as universal app if your intention is to develop a single app for ipad and iphone.
Check this link out on some tricks on creating such an app
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW6
Related
RESIZING HERE MAPS-HELP
I'm building an Ionic app with HERE maps. When I change my phones orientation I call maps.getViewPort().resize(), but it doesn't work.I had set my div background where the map is to red and background is 100% width which is correct but maps don't scale.So I will be happy if you have some solutions.
Picture: Event when phones orientation is changed
Code of event:
Phone Screen :
Managed to find a solution. The problem was that screenOrientation function was called faster than maps would resize so adding a 250ms delay worked fine for me.
I am using phonegap to develop an android app and writing a photo-taking module.
I have followed phonegap's API and it works (Full screen camera open automatically, snap picture and display in an tag).
However I would like to resize the camera screen when it open up, that is I do not want the camera screen being full screen, but an small rectangle size which can be put inside some tag.
I wonder if it is possible, and if yes how would I do it? Please give me any hints! Thanks!
Phonegap does not control the camera screen. What it does is start the phone's camera app and get the result back, so there's no way you can resize it.
If you want a camera view that does not take all the screen you can either build a phonegap plugin using native code (not sure how to make a plugin only taking part of the screen) or use HTML 5 camera api instead of phonegap's api. The down side is it will only work with recent versions of android.
Have a look at Raymond Camden's blog for a sample of how to use html5 camera api : http://www.raymondcamden.com/index.cfm/2013/5/20/Capturing-camerapicture-data-without-PhoneGap
I have a requirement to implement a feature for showing some address detail(address view) when user tap a maker from google map(map view). I want to use css3 rotate for user experience.
I use below css so that it is working fine in iOS device but part of android devices are very slow.
{translateZ(0); perspective:1000px; backface-visibility:hidden;}
Another idea is that to set map view visibility to hidden when it rotates.
Do you have any better idea for much DOM rotate performance issue?
We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.
I am developing a video player using html5 for iPad and iPhone device, I implemented a scrub bar for video seeking. It works fine in the normal screen, if the page is zoomed then it behaves in a different way, I need a external resource for this. Is there is any plugin for it or any other idea for it?
How about preventing the zoom? If you design your page for a iPhone/iPad, just make it fit the screen and unzoomable.