Take URL to open larger map from iFrame?

user_6419723 0
Viewed 237

I want to get a link to open a larger map from the iFrame URL:

<iframe 
src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d414225.88930329087!2d14.068999827954114!3d46.99590051638977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47707345308f7e65%3A0x687eb6df8c618d2b!2sKlagenfurt%2C%20Austria!5e0!3m2!1sen!2srs!4v1643793775072!5m2!1sen!2srs' 
style='border:0;' allowfullscreen='' loading='lazy'></iframe>

This URL from iframe to open in a new tab is invalid :

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d414225.88930329087!2d14.068999827954114!3d46.99590051638977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47707345308f7e65%3A0x687eb6df8c618d2b!2sKlagenfurt%2C%20Austria!5e0!3m2!1sen!2srs!4v1643793775072!5m2!1sen!2srs

I tried to take the URL from iFrame :

enter image description here

But in website mounting time, JS cannot read iFrame DOM... Any suggestions?

iframe google-maps dom javascript
2 Answers

You should read what the response from your URL already tells you:

The Google Maps Embed API must be used in an iframe.

As you can see in the example in the Google Maps Embed API docs:

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q=Space+Needle,Seattle+WA">
</iframe>

You're missing the ?key=API_KEY part. So, set up an API key as described on the website, and you're good to go.

user_24723980

The right solution is to use the Google Maps API. However, if you need to parse data from this URL, it is possible. URL contains lat and lng so you can (somehow) recreate target URL. The subsequent solution is only a rough example and is not production ready:

const url = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d414225.88930329087!2d14.068999827954114!3d46.99590051638977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47707345308f7e65%3A0x687eb6df8c618d2b!2sKlagenfurt%2C%20Austria!5e0!3m2!1sen!2srs!4v1643793775072!5m2!1sen!2srs';
const partOne = url.split('2d');
const partTwo = partOne[1].split('!3d');
const partThree = partTwo[1].split('!');
const lng = partTwo[0];
const latAndZ = partTwo[1].split('!')[0];
const z = latAndZ[latAndZ.length - 1]
const lat = latAndZ.slice(0,-1);
const result = `https://www.google.com/maps/@${lat},${lng},${z}z`;
console.log(result);

user_55970170
Related