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>