0
340
Vistas¿Tomar URL para abrir un mapa más grande desde iFrame?
Quiero obtener un enlace para abrir un mapa más grande desde la URL de iFrame:
<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>Esta URL de iframe para abrir en una nueva pestaña no es válida:
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!2srsTraté de tomar la URL de iFrame:
Pero en el tiempo de montaje del sitio web, JS no puede leer iFrame DOM... ¿Alguna sugerencia?
2 Respuestas
Responde la pregunta0
Deberías leer lo que ya te dice la respuesta de tu URL :
La API de inserción de Google Maps debe usarse en un iframe.
Como puede ver en el ejemplo en los documentos de Google Maps Embed API :
<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> Te falta la parte ?key=API_KEY . Por lo tanto, configure una clave API como se describe en el sitio web y estará listo para comenzar.
0
La solución adecuada es utilizar la API de Google Maps . Sin embargo, si necesita analizar datos de esta URL, es posible. La URL contiene latitud y longitud para que pueda (de alguna manera) recrear la URL de destino. La solución posterior es solo un ejemplo aproximado y no está lista para la producción:
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);