Skip to content

Instantly share code, notes, and snippets.

@Virksaabnavjot

Virksaabnavjot/index.html

Last active January 17, 2023 17:48
Show Gist options
  • Save Virksaabnavjot/bbe6f5fb5df98e3101d13cdcddba413c to your computer and use it in GitHub Desktop.
Save Virksaabnavjot/bbe6f5fb5df98e3101d13cdcddba413c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<title>
Programmatically passing URL parameters to IFrame using JavaScript
</title>
</head>
<body>
<iframe id="myIframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="100%" height="100%"></iframe>
</body>
<script>
let myIframe = document.getElementById("myIframe");
let endpoint = "https://ads.mrvirk.com/";
let url_string = window.location.href;
let url = new URL(url_string);
console.log(url_string);
let size = url.searchParams.get("size");
console.log(size);
let geo = url.searchParams.get("geo");
console.log(geo);
let adsURL = endpoint+"?geo="+geo+"&size="+size;
console.log(adsURL);
myIframe.src = adsURL;
</script>
</html>
@Virksaabnavjot
Copy link
Author

Hi @entreri74 I havent tested a Gmaps embed myself and you haven't provided any specifics but
lets take this sample gmaps embed as an example, i believe it could work but will leave you to test

Here we have a sample gmap embed code

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

here seems the variable you will need to alter is uluru
const uluru = { lat: -25.344, lng: 131.031 };

so you could try something like this

Potential solution code


function initMap() {

//fetching the latitude & longitude yourself
let lat = position.coords.latitude;
  let long = position.coords.longitude;
 
//and using the lat and long in your embeds uluru
  const uluru = { lat: lat, lng: long };
  
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

I believe this should work, but note google maps may have some policies around not tinkering with there code (like they do for adsense) so highly recommend you checking them out before you try something custom like this code.

hope this helps

regards
nav

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment