CODEWITHSUNDEEP
javascriptgoogle-mapsdomiframe
Milos N.
Milos N.

Reputation: 4843

Take 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 :

enter image description here

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

Upvotes: 2

Views: 715

Answers (2)

Jax-p
Jax-p

Reputation: 8521

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);

Upvotes: 1

gru
gru

Reputation: 3069

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.

Upvotes: 1

Related Questions