Satch3000
Satch3000

Reputation: 49412

JQuery Mobile Link to google map not displaying in iframe

I am using JQuery Mobile version 1.1.1 with a page.

I have a url which shows a google map and I want to display it on the page, so I have added the url to an iframe src like this:

<iframe type="text/html" src="https://maps.google.co.uk/maps/ms?msid=201176082552223167980.0004c49fe52444e8ead96&msa=0" frameborder="0" id="myIframe">
</iframe>

The whole page code looks like this:

<div data-role="page" id="home">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">   

    <iframe type="text/html" src="https://maps.google.co.uk/maps/ms?msid=201176082552223167980.0004c49fe52217e8ead96&msa=0" frameborder="0" id="myIframe"></iframe>

    </div>

    <div data-role="footer">
        <h1>Footer Title</h1>
    </div>

</div>

My problem is that the iframe is not displaying anything.

Any ideas why?

Upvotes: 0

Views: 603

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

Go to https://maps.google.co.uk/maps/ms?msid=201176082552223167980.0004c49fe52444e8ead96&msa=0 and use the embed-code provided there.

Especially the parameter &output=embed is required in the URL

Upvotes: 1

Related Questions