I making prototype web app for iPad, and I want to embed google map.
I embedded map with this if frame code from google's tutorial:
<iframe width="720" height="340" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Belgrade,+Serbia&aq=0&sll=37.0625,-95.677068&sspn=38.638819,79.013672&ie=UTF8&hq=&hnear=Belgrade,+City+of+Belgrade,+Central+Serbia,+Serbia&ll=44.809,20.465641&spn=0.022226,0.062571&z=14&output=embed"></iframe>
But, in safari I get map with some withe rectangle: http://cl.ly/2u2G0p1T3x3O1Q1X3A1B
and when I add this web app to my homescreen, I don't get map, I get white div: http://cl.ly/0O3n2c3N3C0C1F2x0l2a
Where is some other way to implement google map on iPad web app? :|
I haven't tried making an app yet but I would probably try using Googles javascript api instead of an iframe. I believe your amount of control is much better with js than with the static version.
Related
I'm developing a Cordova / Phonegap app. In some point of my app I load a page where I want a google calendar to be shown so user can see the agenda.
I just copy-pasted the iframe from google calendar, but, while it shows correctly my calendar in browser testing, when I create iOS app, it doesn't show itself, nor in simulator, nor in device.
Why is this happening?
....
</div>
<iframe src="https://www.google.com/calendar/embed?src=whitedragongroup%40gmail.com&ctz=Europe/Madrid" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</body>
PS:
I tried placing div inside previous div but result is the same.
I am using an iFrame for embedding a youtube video in my iOS/iPad application, application displays video nicely, but the problem is, it always streams a low resolution video, I did try all of the "hd=1" of "vq=large" and a few more things. it's not helping. Any help will be greatly appreciable.
go to the Share tab below the video, then the Embed tab
copy the html provided and paste into your site’s editor, should look something like this:
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/RrphKwWOfcg?rel=0″ frameborder=”0″ allowfullscreen></iframe>
then add the magic html additions (in bold)
<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/RrphKwWOfcg?rel=0&vq=hd1080” frameborder=”0″ allowfullscreen></iframe>
(or ?rel=0&vq=hd720 for 720p)
I am using my webpage to show a pdf from App_Data.
I using this html:
<iframe src="" id="iframePDF" style="width:100%; height:93%;z-index:1;></iframe>
And javascript
$('#iframePDF').attr("src", responseData.TempPath + "#zoom=100&page=1");
The zoom isn't zooming the page and I cannot scroll.
Is there any workaround for this or a solution?
You might be able to scroll using two fingers, which is not intuitive for the user. You can not make the area scrollable unless you know the size of the content, which you can't, because iOS doesn't tell you.
Sorry, friend, but then you'd have to look into a native or hybrid app like the solutions offered by Cordova (PhoneGap). It doesn't matter if the file is in .NET App_Data or anywhere else online.
The reason why it works in your browser is because it has a built-in file viewer which is loaded when you open the file in a new window.
Wrap the iframe in a width-constrained element of some kind then apply this CSS to that element:
-webkit-overflow-scrolling: touch
With iOS6 the old embed code no longer works, it just opens the video in Safari
I tried to use the new embed code, but when I make this dynamic it opens the video in Safari.
When I add a static entry in the webview it works, but it's rather slow and a lot of dom elements are injected
An example for the new embed code;
<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>
I was thinking to use the HTML5 video tag and find out the url for the video, but this probably violates the Youtube TOS
Any suggestions?
The solution is to set OpenAllWhitelistURLsInWebView to YES in Phonegap settings
I am currently having some trouble displaying a you tube video on my custom fan page. I am using Static HTML I Frame Tab to embed this code. The problem is that the facebook notifications or search drop down menu continues to go behind y you tube video when using IE.
I have included param name="wmode" value="transparent" within the embeded you tube code but for whatever reason the fb drop down menu continues to go behind the video. The fan page is https://www.facebook.com/blaineostrander
Again, this issue only seems to be happening in IE
Thank you in advance
Into src in iframe put ?wmode=opaque
Ex :
<iframe width="420" height="315"
src="http://www.youtube.com/embed/pVllEZirODQ?wmode=opaque"
frameborder="0" allowfullscreen>
</iframe>
Works great for me