i am testing a little side project for internal use.
We want to use google directions api to generate een predifined route from amsterdam to belgieplein in bruxels.
here is the code als far as i could create it with the base code google api pages give
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<iframe
width="450"
height="250">
frameborder="0" style="border:0"
https://www.google.com/maps/embed/v1/directions
?key=AIzaSyC0usSsGXuNajTOjNnMP4yDTmc4P7kqjYk
&origin=RijsWijkstraat+223,Amsterdam
&destination=Back-UpStraat+12,Amsterdam
&avoid=tolls
</iframe>
</html>
But all it does is generate a white page. what am i doing wrong here?
I am learing to work with google apis and this one is giving me a headache at the moment.
have changes the origin and directions to almost everything googles api pages says clearly it can handle origin defines the starting point from which to display directions. The value can be either a place name, address or place ID. The string should be URL-escaped, so an address such as "City Hall, New York, NY" should be converted to City+Hall,New+York,NY. (The Google Maps Embed API supports both + and %20 when escaping spaces.) Place IDs should be prefixed with place_id:.
destination defines the end point of the directions.
So the adress of beginning and ending location should be working but it doesn't.
Can some one point me in a direction to get it working, to be clear it's for learning the apis and what we can do with it in basic internal learning web pages.
Make sure the URL of the iframe has no newline or whitespace character and that it is included as the src attribute in the iframe. It should be:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
src ="https://www.google.com/maps/embed/v1/directions?key=AIzaSyC0usSsGXuNajTOjNnMP4yDTmc4P7kqjYk &origin=RijsWijkstraat+223,Amsterdam&destination=Back-UpStraat+12,Amsterdam&avoid=tolls"
</iframe>
</html>
I added this into a jsfiddle here for you to view: https://jsfiddle.net/16q6exkh/
The URL should be in a src attribute inside the <iframe> tag, the closing </body> tag is missing in your code, and the URL contains whitespace. If you fix all this, it works:
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<iframe width="450" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyC0usSsGXuNajTOjNnMP4yDTmc4P7kqjYk&origin=RijsWijkstraat+223,Amsterdam&destination=Back-UpStraat+12,Amsterdam&avoid=tolls">
</iframe>
</body>
</html>
Related
I'm new to code and I want to implement a code that puts the youtube live chat onto the page. Right now it is refusing to connect.
Here is my code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="pewdiepie" height="80px" width="300px" frameborder="0" src= "https://akshatmittal.com/youtube-realtime/embed/#!/UCq-Fj5jknLsUf-MWSy4_brA" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
<p>
<iframe id="tseries" height="80px" width="300px" frameborder="0" src="https://akshatmittal.com/youtube-realtime/embed/#!/UC-lHJZR3Gqxm24_Vd_AJ5Yw" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
<p>
<iframe height="500" width="300" src="https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=<MY_IP>" style="border: 0; width:300px; height:100px; background-color: transparent;"></iframe>
</body>
</html>
Is there anything wrong with the code? And how I can fix it? By the way I hid my IP address.
To embed a youtube live chat, the link must be like this:
"https://www.youtube.com/live_chat?v=<id_video>&embed_domain=<your_domain>"
So, to embed your chat on stackoverflow, it will be:
"https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=www.stackoverflow.com"
EDIT :
Here is the official documentation from google.
During a live stream, you can embed live chat on your own side by using an iframe.
Get the video ID for the live stream. You can get the video ID from the watch page URL (youtube.com/watch?v=12345). In this case, the video ID is ‘12345’.
If you chose "Stream now," right-click on the player and select Copy video URL to get the video URL.
Get the domain URL for the site you want to embed chat on. If you're embedding chat on www.example.com/youtube_chat, your embedding domain is "www.example.com."
Combine the embedded URL in the following way: https://www.youtube.com/live_chat?v=12345&embed_domain=www.example.com.
This is the URL for your iframe. Note the embed_domain must match the the URL of the page you’re embedding the chat on. If they are different, the embedded chat will not load.
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<iframe src="https://www.youtube.com/watch?v=dQBzT3XBwzU" width="600" height="600">
<p>Youtube</p>
</iframe>
</body>
</html>
This code show me empty frame and i dont know why. I tried some other urls and some of them works and some dont
You are probably getting a does not permit cross-origin framing issue. Check your console.
I'm looking to take a variable or statement from my manifest (below) and place it in an HTML file. I think it's a reasonably straightforward process but for some reason, I cannot figure out how to get the two to speak with one another. Can I get some help on how to complete this?
Manifest:
applications:
name: application
instance: 1
buildpack: staticfile_buildpack
host: application-hostTenant
memory: x amount
display: browser
**url: https://iframe-tenant.apps.eu1.mindsphere.io**
description: "A simple app using the iframe method to host an outside
application/link. The link/app is specified in the url"
Assume that the iFrame/HTML call is similar (below)
<!DOCTYPE html>
<html>
<head>
<title>Basic Title</title>
</head>
<iframe src="url from the Manifest" style="border:0px #ffffff none;" name="myIFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%px" width="100%px" allowfullscreen></iframe>
</html>
There doesn't need to be anything else on the web page other than the iframe and access to it.
I would like to add OSM to my website (in Ruby on Rails), so I've exported following html code from their site:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-109.3359375%2C56.84897198026975%2C25.3125%2C84.38877975103257&layer=mapnik&marker=76.23088818107027%2C-42.076958649999995" style="border: 1px solid black"></iframe><br/>
<small>see more</small>
and I've put it into
<!DOCTYPE html>
<html>
<body>
//here
</body>
</html>
The problem is, that there is only empty rectangle, without map, but when I click "see more" I'm redirected to OSM site with big map.
What can cause, that I can't see map on my site?
Edit:
I've just seen, that it only doesn't work only in desktop browser, when I use my mobile phone is ok.
I'm trying to embed a pdf into webpage and found a strange phenomenon. When I use this html:
<html>
<head>
</head>
<body marginwidth="0" marginheight="0" style="background-color: rgb(38,38,38)">
<embed width="100%" height="100%" src="some.pdf" type="application/pdf">
</body>
</html>
Everything worked as expected. However, when I insert <!DOCTYPE html> into the first line, my browser only display part of the pdf.
Will anyone explain this strang behavior to me? It took me hours to figure out that it's the doctype line that's causing the problem so I'm really curious why.
Doc types tell validators which version of HTML to use in checking the document's syntax. Here's a list of DOCTYPES that helps explain what each of them do.
You can probably also have the PDF file align & scale itself automatically by wrapping the embed tags with "p align" like this:
<html>
<head>
</head>
<body marginwidth="0" marginheight="0" style="background-color: rgb(38,38,38)">
<p align="center"><embed width="100%" height="100%" src="some.pdf" type="application/pdf"></p>
</body>
</html>