0
339
ViewsTake URL to open larger map from iFrame?
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 :
But in website mounting time, JS cannot read iFrame DOM... Any suggestions?
2 answers
Answer question0
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.
0
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);