Streaming live at 10am (PST)

Google maps embed API - Street view


#1

Hello.

Could somebody help me pick the correct src link for a google map embed?

It's a google street view tour. Easy enough I thought except I can't work out what src link I should use.

Here's the link to the map

Here's what my iframe looks like...

<iframe
  width=“100%"
  height=“500"
  frameborder="0"
  style="border:0"
  src="https://www.google.co.uk/maps/uv?hl=en&pb=!1s0x48888a4082a5965f:0x4fd47a2ef9b475f6!2m19!2m2!1i80!2i80!3m1!2i20!16m13!1b1!2m2!1m1!1e1!2m2!1m1!1e3!2m2!1m1!1e5!2m2!1m1!1e4!3m1!7e115!4s/maps/place/the%2Bblair%2Bdrummond%2Bsmiddy/@56.1623886,-4.0608345,3a,75y,276.43h,90t/data%3D*213m4*211e1*213m2*211sBvOHkhv65hQAAAQvxbAxXA*212e0*214m2*213m1*211s0x48888a4082a5965f:0x4fd47a2ef9b475f6!5sthe+blair+drummond+smiddy-+Google+Search&imagekey=!1e2!2shHo35FiLWE0AAAQvxbAxdw&sa=X&ved=0ahUKEwj43sS3rpfUAhWDAsAKHff"
  allowfullscreen="allowfullscreen">
</iframe>

Needless to say, I'm a bit confused. I've read through a few forum posts and the google guides but I can't figure it.

If somebody could help me understand this string and what to use I'd be grateful.

Thanks
Will


#2

Here's a share link for ref...
https://preview.webflow.com/preview/smiddyfarmshop?preview=3a817ee171fe9b1c38270a87b3c6f410

The contact page is the one I'm working on.

Thanks
Will


#3

I've tried encoding/decoding the link. Still no joy.

<iframe
  width=“100%"
  height=“500"
  frameborder="0" 
  src="https://www.google.com/maps/embed?pb=WHAT GOES IN HERE?" allowfullscreen>
</iframe>

#4

You are using the wrong type of quotes... resulting in additional set of normal quotes wrapped around the values.

The src is also left blank/invalid. Of course it won't show anything.


#5

Ah, it's just quote marks instead of inch marks. Thanks.

It's been driving me mad, I'll take a look.


#6

Hmm, it's not the quote marks sadly.

I can't work out the correct link src to use.

My client has supplied me with this link...
https://www.google.co.uk/maps/uv?hl=en&pb=!1s0x48888a4082a5965f:0x4fd47a2ef9b475f6!2m19!2m2!1i80!2i80!3m1!2i20!16m13!1b1!2m2!1m1!1e1!2m2!1m1!1e3!2m2!1m1!1e5!2m2!1m1!1e4!3m1!7e115!4s/maps/place/the%2Bblair%2Bdrummond%2Bsmiddy/@56.1623886,-4.0608345,3a,75y,276.43h,90t/data%3D*213m4*211e1*213m2*211sBvOHkhv65hQAAAQvxbAxXA*212e0*214m2*213m1*211s0x48888a4082a5965f:0x4fd47a2ef9b475f6!5sthe+blair+drummond+smiddy+-+Google+Search&imagekey=!1e2!2sBvOHkhv65hQAAAQvxbAxXA&sa=X&ved=0ahUKEwj43sS3rpfUAhWDAsAKHffpDoYQoB8IfDAK

I can't get it to work. So I've tried decoding the URL to this...
https://www.google.co.uk/maps/uv?hl=en&pb=!1s0x48888a4082a5965f:0x4fd47a2ef9b475f6!2m19!2m2!1i80!2i80!3m1!2i20!16m13!1b1!2m2!1m1!1e1!2m2!1m1!1e3!2m2!1m1!1e5!2m2!1m1!1e4!3m1!7e115!4s/maps/place/the+blair+drummond+smiddy/@56.1623886,-4.0608345,3a,75y,276.43h,90t/data=*213m4*211e1*213m2*211sBvOHkhv65hQAAAQvxbAxXA*212e0*214m2*213m1*211s0x48888a4082a5965f:0x4fd47a2ef9b475f6!5sthe blair drummond smiddy - Google Search&imagekey=!1e2!2sBvOHkhv65hQAAAQvxbAxXA&sa=X&ved=0ahUKEwj43sS3rpfUAhWDAsAKHffpDoYQoB8IfDAK

I'm struggling to decipher what the issue is. If you have any pointers Sam I'd be very grateful.

I've used the same method to embed regular google maps without any issues.

Thanks again
Will


#7

Maybe this can help?

https://developers.google.com/maps/documentation/javascript/examples/streetview-embed


#8

Thanks Alex I'll take a look.

I'm scratching my head because I've tested the same method above using a different src link and it worked fine.


#9

@WillPrice how could you convert https://www.google.co.uk/maps/uv?hl=en&pb=!1s0x4....... url to an embed url like this https://www.google.com/maps/embed?pb=!1m0!4v1500027460605!6m8!1m7!1sQie9y4rOCVUAAAQ1mP0zvA!2m2!1d56.12221676583655!2d-3.142652147910553!3f159.91!4f-1.8700000000000045!5f0.4000000000000002.


#10

Just found a solution,
extract the place name from url(... maps/place/the%2Bblair%2Bdrummond%2Bsmiddy/....).
here place name is "the blair drummond smiddy" and search this in google map. you will get this url https://www.google.co.in/maps/place/Blair+Drummond+Smiddy+Farm+Shop/@56.162278,-4.0630767,17z/data=!3m1!4b1!4m5!3m4!1s0x48888a4082a5965f:0x4fd47a2ef9b475f6!8m2!3d56.162278!4d-4.060888.
then on the left side menu you can see all images and 360 view. click on any of the 360 view. then we can get the embed url.

eg:


#11

That's fantastic testalok, it's been driving me nuts. Thanks, much appreciated. I'll give it a go.


#12

Works a treat. Thank you.