Embedding Google Maps Into HTML using A Variable as the “src” attribute

I am trying to make a pokemon go (you walk around in real life and catch pokemon) style game in HTML. Geolocation is okay at the moment but my main problems are in the map.

The map automatically sets itself to a predetermined location and then changes to the player’s location, so I can check it works. But when I press the show position button, it switches from the predetermined location to google saying that the URL is malformed.

It shows not exactly my location but near, maybe 5 mile radius, so I know the location is fine.

This is my code:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>
<iframe id="irfm_pos" width="100%" height="600" src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;coord=53.2188, -6.6736&amp;q=53.2188,-6.6736&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
    const ifrm = document.getElementById("irfm_pos");

    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;

    var pos_url = "https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;coord="+ position.coords.latitude +", "+ position.coords.longitude + "&amp;q="+ position.coords.latitude + ", "+ position.coords.longitude + "&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed";
    ifrm.setAttribute("src", pos_url);
    console.log(pos_url);
}
</script>
</body>
</html>

As you can see, I am declaing a variable called “pos_url” and setting the iframe attribute to the value of “pos_url”.

var pos_url = "https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;coord="+ position.coords.latitude +", "+ position.coords.longitude + "&amp;q="+ position.coords.latitude + ", "+ position.coords.longitude + "&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed";
ifrm.setAttribute("src", pos_url);
console.log(pos_url);

I also am printing pos_url so I can check it is fine, it is not but I do not know how to fix it.
https://maps.google.com/maps?width=100%&height=600&hl=en&coord=53.22043653273203,%20-6.674305582123162&q=53.22043653273203,%20-6.674305582123162&ie=UTF8&t=&z=14&iwloc=B&output=embed

It keeps the %20 in the url when it is supposed to be a space, I have tried this without the space but then it is malformed (I used f12 to add the spaces)