时间戳

首页 > 解决方案 > Google street view is not showing on a website

google-maps - Google street view is not showing on a website

问题描述

I am trying to embed a Google Map and street view on a website. The postcode, latitude and longtitude are stored in databases which are OK and my code is:

<iframe width="600" height="450" frameborder="0" style="border:0"
                src="https://www.google.com/maps/embed/v1/place?q={{ $code[0] }}%20{{$code[1]}}&key=MYKEY" allowfullscreen></iframe>
                <hr />
                  <iframe src="https://maps.googleapis.com/maps/api/streetview?size=400x400&location={{ $pc[0]['latitude'] }},{{ $pc[0]['longtitude'] }}&fov=80&heading=70&pitch=0&key=MYKEY&signature=MYSIGNATURE" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

PHP is returning this OK as

 <iframe width="600" height="450" frameborder="0" style="border:0"
                src="https://www.google.com/maps/embed/v1/place?q=BA1%204HX&key=MYKEY" allowfullscreen></iframe>
                <hr />
                  <iframe src="https://maps.googleapis.com/maps/api/streetview?size=400x400&location=51.398734,-2.3936212&fov=80&heading=70&pitch=0&key=AMYKEY&signature=MYSIGNATURE" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

The problem is that the map is fine and correct but the street view is a blank.

I have looked on Frefox tools for rejection or anything by Google but there is nothing.

标签： google-mapsgoogle-street-view

解决方案

在尝试您的示例代码时，我收到了Refused to display .... in a frame because it set 'X-Frame-Options' to 'sameorigin'错误：错误

请注意，街景静态 API 旨在嵌入到<img>标记的 src 属性中，如下所示：

<img src="https://maps.googleapis.com/maps/api/streetview?size=400x400&location=51.398734,-2.3936212&fov=80&heading=70&pitch=0&key=YOUR_API_KEY&signature=SIGNATURE"/>

要解决此问题，您可以将街景静态图像加载到<img>上述标记中，或者使用街景模式 for Maps Embed API，如下所示：

<iframe src="https://www.google.com/maps/embed/v1/streetview?location=51.398734,-2.3936212&fov=80&heading=70&pitch=0&key=YOUR_API_KEY" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

推荐阅读