Waze control iframe from data inputs and buttons in HTML

<!DOCTYPE html>
<html>
<title>wazedev</title>
<body>
<iframe id="wazeframe1" src="https://embed.waze.com/iframe?zoom=12&lat=37.80833&lon=-122.41025&width=500&height=400&pin=1" width="510"
height="450">
</iframe><br>
<script>
/*
#######################################################################################
######################## Script to GET the coordinates from iframe in HTML ############
######################## and then modify them from inputs to re-center map ############
######################## according to coordinates passed by user ######################
#######################################################################################
*/
    //This here will get the lat and lon from the iframe string, to pass initially to the value of the input value attribute.
function getData() {
var iframe_src_string = document.getElementById("wazeframe1").src;
var pos_lat = iframe_src_string.search("&lat=");
var pos_lon = iframe_src_string.search("&lon=");
    // the length of the string
    var iframe_src_string_length = iframe_src_string.length
    //document.write ("<br>Length of src string:" + iframe_src_string_length)
    // extract a substring that only includes from lat, not the ampersand before it, but all the way to the end of the string.
    var iframe_substring = iframe_src_string.substring(pos_lat+1, iframe_src_string_length);
    // extract a subarray that only includes lat and lon parameters, but dirty. They begin with lat=  or lon=
    var iframe_subarray = iframe_substring.split("&",2)
    //document.write ("<br>The substring of iframe src has: " + iframe_subarray)
    // Now, we assign each array to a variable, to remove the first four characters
    var lat_from_array = iframe_subarray[0];
    var lon_from_array = iframe_subarray[1];
    //document.write ("<br>The first array has: " + lat_from_array);
    //document.write ("<br>The second array has: " + lon_from_array);
    // remove the first four characters, to finally get only latitude and longitude.
    var pure_lat = lat_from_array.substring(4, lat_from_array.length);
    var pure_lon = lon_from_array.substring(4, lon_from_array.length);
    //document.write ("<br>The first array NOW has: " + pure_lat);
    //document.write ("<br>The second array NOW has: " + pure_lon);
    // Assign these values to the input forms that will housethe lat and lon to be modified
    document.getElementById("form_lat").value = pure_lat;
    document.getElementById("form_lon").value = pure_lon;
};
</script>
<button onclick="getData()">Get Data From iFrame lat and lon values</button>
<br>
Latitude:
<input id="form_lat" name="Latitude:" type="text" value="15.0000">
<br>
Longitude:
<input id="form_lon" name="Latitude:" type="text" value="-90.0000">
<br>
<button onclick="wazeManipulate()">Change Coordinates in Waze Map</button>
<br>
Some coordinates for fun:
<br>
Mobile Alabama
<br>
Latitude 30.68502
<br>
Longitude -88.05372
<br>
Times Square
<br>
Latitude 40.75955
<br>
Longitude -73.98547
<br>
<script>
function wazeManipulate() {
    // get the latitude and longitude from the input forms
    var lat = document.getElementById("form_lat").value;
    var lon = document.getElementById("form_lon").value;
    var srcpart1 = "https://embed.waze.com/iframe?zoom=12&lat=";
    var srcpart2 = "&lon=";
    var srcpart3 = "&width=500&height=400&pin=1";
    var embed_url = srcpart1 + lat + srcpart2 + lon + srcpart3;
    document.getElementById("form_lat").value = lat;
    document.getElementById("form_lon").value = lon;
    document.getElementById("wazeframe1").src = embed_url;
    var contents1 = document.getElementById("wazeframe1").src;
    //alert(contents1);
};
</script>
</body>
</html>