CODEWITHSUNDEEP
htmlgoogle-mapsiframegoogle-maps-api-3
user1729506
user1729506

Reputation: 975

How can I embed a Google Map in Streetview mode with an iframe?

When I pull up a Google Map, there is a little gear icon near the bottom-right that allows me to share. It includes finding an embeddable <iframe>. However, once I go into Streetview this gear icon disappears.

How can I embed the streetview version of the map?

Upvotes: 11

Views: 34875

Answers (5)

Juraj Bublinec
Juraj Bublinec

Reputation: 490

If you are looking for a more generic way, for example to display embedded streetview based on the regular google map link or coordinates. Here is my solution:

Extract coordinates from a regular link

export const getCoordinatesFromGoogleMapURL = (url: string) => {
  if (!url) {
    return undefined
  }
  const urlParts = url.split('/@')[1]?.split(',')

  if (!(urlParts && urlParts?.length > 1)) {
    return undefined
  }

  const gpsX = parseFloat(urlParts[0])
  const gpsY = parseFloat(urlParts[1])

  if (isNaN(gpsX) || isNaN(gpsY)) {
    return undefined
  }

  return [gpsX, gpsY] as [number, number]
}

Generate embed url from coordinates:

export const generateGoogleMapEmbedUrl = (coordinates: [number, number]) => {
  if (!coordinates) {
    return undefined
  }

  const baseUrl = "https://www.google.com/maps/embed/v1/streetview"
  const coordinatesString = `${String(coordinates[0])},${String(coordinates[1])}`
  const url = `${baseUrl}?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&location=${coordinatesString}`

  return url
}

Finally we can put it together:

export function convertToEmbedURL(url: string): string {
  const coordinates = getCoordinatesFromGoogleMapURL(url)
  const embedUrl = generateGoogleMapEmbedUrl(coordinates)

  return embedUrl;
}

You can read the official docs to find out more about params etc: https://developers.google.com/maps/documentation/embed/embedding-map#streetview_mode

Upvotes: 0

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

Since Google changed in the past two years I'll post an answer that shows how to embed Street View with the new Maps.

  • Enter in Street View Mode with the best view you want

  • Click those "three dots" on the top left corner of the screen

    Dots

  • Click "Share or Embed Image"

Embed Image

  • Click on the tab "Embed Image" and copy/paste the code of the iframe

enter image description here

Upvotes: 5

Sourab Reddy
Sourab Reddy

Reputation: 353

its too simple .just go to link below https://developers.google.com/maps/documentation/javascript/examples/streetview-embed

copy the html+javascript code into your page and modify the div style (by default it goes full screen) having id= map-canvas

now go to the desired street view and copy the latitude,longitude in the url then replace in your code in initialize function latling(latitude,longitude) done!!!! happy to post my first answer stack overflow has answered me so many times

Upvotes: 3

aaronmgdr
aaronmgdr

Reputation: 608

It appears the problem is that the new google maps does not have a way to embed.

If you click on the ? in the bottom right corner while NOT in pano / street view mode you can revert to classic maps

Then you'll see the link

from there you can select embed frame.

Upvotes: 11

Zealot
Zealot

Reputation: 697

When you're in the Streeview mode, click on the "link button" next to the print button. You'll have an iframe and a link to customize and preview it.

Upvotes: 8

Related Questions