CODEWITHSUNDEEP
htmlgoogle-mapsiframeembed
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20183

Google maps tour won't work inside an iframe

I need to embed this tour to a site:

https://www.google.es/maps/@39.566752,2.649834,3a,75y,113.38h,90t/data=!3m5!1e1!3m3!1s86s2yikaJz6n9Ezi7bJmTw!2e0!3e2

But the thing is that

<iframe src="https://www.google.es/maps/@39.566752,2.649834,3a,75y,113.38h,90t/data=!3m5!1e1!3m3!1s86s2yikaJz6n9Ezi7bJmTw!2e0!3e2"></iframe>

Wont display anything

Any suggestion?

Upvotes: 0

Views: 1775

Answers (1)

user3350731
user3350731

Reputation: 972

For the new version of Google maps, in order to show your map you need to past the integration version of the link, you can't just past the share URL inside of an iframe because with classic google maps it is trivial to convert from a share link to the iframe embed URL because it essentially has the same URL parameters, you just add an output=embed URL parameter so that Google will output the embed layout rather than the desktop site layout.

So that, I think you should use Safari browser, since Google maps is not updated in it for some reason. For you're case : You need to prcess the url : https://maps.google.es/maps?ll=39.566752,2.649834&spn=0.369997,0.837021&cbll=39.566752,2.649834&layer=c&panoid=86s2yikaJz6n9Ezi7bJmTw&cbp=12,113.38,,0,0&t=m&z=11

And here'd how I do it :

$url = $options["url"];
$url = parse_url($url);
$query = array();
parse_str( $url['query'], $query );
$iframe = "<iframe  marginheight=\"0\" marginwidth=\"0\" "; 
$iframe .= "src=\"https://maps.google.com/maps?f=q";    
$iframe .= "&amp;source=s_q";   
$iframe .= "&amp;hl=fr";    
$iframe .= "&amp;geocode="; 
if(isset($query['q'])) $iframe .= "&amp;q=".$query['q'];    
$iframe .= "&amp;aq=";  
if(isset($query['sll'])) $iframe .= "&amp;sll=".$query['sll'];  
if(isset($query['sspn'])) $iframe .= "&amp;sspn=".$query['sspn'];
$iframe .= "&amp;t=m";
$iframe .= "&amp;ie=UTF8";
if(isset($query['hq'])) $iframe .= "&amp;hq=".$query['hq'];
if(isset($query['hnear'])) $iframe .= "&amp;hnear=".$query['hnear'];
if(isset($query['ll'])) $iframe .= "&amp;ll=".$query['ll'];
if(isset($query['spn'])) $iframe .= "&amp;spn=".$query['spn'];
if(isset($query['z'])) $iframe .= "&amp;z=".$query['z'];
if(isset($query['iwloc'])) $iframe .= "&amp;iwloc=".$query['iwloc']; else $iframe .= "&amp;iwloc=";
$iframe .= "&amp;output=embed\">";
$iframe .= "</iframe>";

this will generate something like this :

<iframe  src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=fr&amp;geocode=&amp;aq=&amp;t=m&amp;ie=UTF8&amp;ll=39.566752,2.649834&amp;spn=0.369997,0.837021&amp;z=11&amp;iwloc=&amp;output=embed" marginwidth="0" marginheight="0" scrolling="no" s12546768360786571550="true" replaced="true"></iframe>

The iframee generated it only give you the area selected by google maps, it you want the google tour add this iframe :

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?cbll=39.566752,2.649834&amp;layer=c&amp;panoid=86s2yikaJz6n9Ezi7bJmTw&amp;cbp=12,113.38,,0,0&amp;ie=UTF8&amp;ll=39.566752,2.649834&amp;spn=0.369997,0.837021&amp;t=m&amp;z=11&amp;source=embed&amp;output=svembed"></iframe><br /><small><a href="https://maps.google.es/maps?cbll=39.566752,2.649834&amp;layer=c&amp;panoid=86s2yikaJz6n9Ezi7bJmTw&amp;cbp=12,113.38,,0,0&amp;ie=UTF8&amp;ll=39.566752,2.649834&amp;spn=0.369997,0.837021&amp;t=m&amp;z=11&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>

DEMO

Upvotes: 2

Related Questions