0
269
VistasHow to find long and lat from map url and then making it more dynamic by passing the long and lat as param
I am new to vue js and am stuck with embed google map url. I have google and searched a lot but not getting what I want. I have this url for example: "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20041.58914746939!2d17.008093249999998!3d51.10479505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spl!2spl!4v1644570663221!5m2!1spl!2spl"; and from this url I am trying to get the lat and long, so I can make them more dynamic and not just hardcode it. Any help will be much appreciated!
So far I tried this below, i want to pass long and lat as param or as variable ( + lat + long...) :
computed: {
src() {
const url = "https://www.google.com/maps/embed?pb=";
const params = new URLSearchParams({
center: `${20041.58914746939},${17.008093249999998}`,
zoom: 15,
size: "300x300",
maptype: "terrain",
});
return `${url}?${params}`;
},
},
// also tried with this example ( nothing seems to work):
computed: {
src() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position.coords.latitude, position.coords.longitude);
const url = "https://www.google.com/maps/embed?pb=";
const myLatlng = `${position.coords.latitude} , ${position.coords.longitude}`;
const params = new URLSearchParams({
center: myLatlng,
zoom: 15,
size: "600x300",
maptype: "terrain",
});
console.log("params", params);
console.log("mylatlong", myLatlng);
return `${url}?${params}`;
});
}
},
},
and then using as props in Iframe:
<template>
<iframe :src="src" class="map" />
</template>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
If the URL format is always the same, maybe you can just use RegExp like this:
const url = 'https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20041.58914746939!2d17.008093249999998!3d51.10479505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spl!2spl!4v1644570663221!5m2!1spl!2spl';
const matchLat = url.match(/!2d.*!3d/g)[0].match(/d.*!/g)[0];
const matchLon = url.match(/!3d.*!2m/g)[0].match(/d.*!/g)[0];
const lat = matchLat.substr(1, matchLat.length - 2);
const lon = matchLon.substr(1, matchLon.length - 2);
console.log('Lat: ', lat);
console.log('Lon: ', lon);
·
Juan Pablo Isaza
Denunciar
Responde la pregunta