0

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.

Jim
  • 596
  • 1
  • 10
  • 36
  • Do you get this error in the console: `Refused to display 'https://maps.googleapis.com/maps/api/streetview?size=400x400&location=51.398734,-2.3936212&fov=80&heading=70&pitch=0&key=MYKEY' in a frame because it set 'X-Frame-Options' to 'sameorigin'.`? – geocodezip Oct 24 '19 at 16:02
  • possible duplicate of [Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'](https://stackoverflow.com/questions/41522652/refused-to-display-url-in-a-frame-because-it-set-x-frame-options-to-sameori) – geocodezip Oct 24 '19 at 16:04
  • possible duplicate of [How to set 'X-Frame-Options' on iframe?](https://stackoverflow.com/questions/27358966/how-to-set-x-frame-options-on-iframe) – geocodezip Oct 24 '19 at 16:42
  • There is nothing in the response header - it is blanl – Jim Oct 24 '19 at 17:19
  • The request is not being refused. – Jim Oct 25 '19 at 06:08

1 Answers1

2

Upon trying your sample code, I was getting the Refused to display .... in a frame because it set 'X-Frame-Options' to 'sameorigin' error : error

Please note that Street View Static API is meant to be embedded within an <img> tag's src attribute like this:

<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"/>

To resolve this, you can either load the Street View Static image in an <img> tag as above, or use Street View Mode for Maps Embed API which would look something like this:

<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>
Angelica
  • 687
  • 4
  • 16