Advertisement
Guest User

Waze control iframe from data inputs and buttons in HTML

a guest
Feb 22nd, 2016
70
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.61 KB | None
  1. <!DOCTYPE html>
  2. <html>
  3. <title>wazedev</title>
  4. <body>
  5. <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"    
  6. height="450">
  7. </iframe><br>
  8. <script>
  9. /*
  10. #######################################################################################
  11. ######################## Script to GET the coordinates from iframe in HTML ############
  12. ######################## and then modify them from inputs to re-center map ############
  13. ######################## according to coordinates passed by user ######################
  14. #######################################################################################
  15. */
  16.     //This here will get the lat and lon from the iframe string, to pass initially to the value of the input value attribute.
  17. function getData() {
  18. var iframe_src_string = document.getElementById("wazeframe1").src;
  19. var pos_lat = iframe_src_string.search("&lat=");
  20. var pos_lon = iframe_src_string.search("&lon=");
  21.     // the length of the string
  22.     var iframe_src_string_length = iframe_src_string.length
  23.     //document.write ("<br>Length of src string:" + iframe_src_string_length)
  24.     // extract a substring that only includes from lat, not the ampersand before it, but all the way to the end of the string.
  25.     var iframe_substring = iframe_src_string.substring(pos_lat+1, iframe_src_string_length);
  26.     // extract a subarray that only includes lat and lon parameters, but dirty. They begin with lat=  or lon=
  27.     var iframe_subarray = iframe_substring.split("&",2)
  28.     //document.write ("<br>The substring of iframe src has: " + iframe_subarray)
  29.     // Now, we assign each array to a variable, to remove the first four characters
  30.     var lat_from_array = iframe_subarray[0];
  31.     var lon_from_array = iframe_subarray[1];
  32.     //document.write ("<br>The first array has: " + lat_from_array);
  33.     //document.write ("<br>The second array has: " + lon_from_array);
  34.     // remove the first four characters, to finally get only latitude and longitude.
  35.     var pure_lat = lat_from_array.substring(4, lat_from_array.length);
  36.     var pure_lon = lon_from_array.substring(4, lon_from_array.length);
  37.     //document.write ("<br>The first array NOW has: " + pure_lat);
  38.     //document.write ("<br>The second array NOW has: " + pure_lon);
  39.     // Assign these values to the input forms that will housethe lat and lon to be modified
  40.     document.getElementById("form_lat").value = pure_lat;
  41.     document.getElementById("form_lon").value = pure_lon;
  42. };
  43. </script>
  44. <button onclick="getData()">Get Data From iFrame lat and lon values</button>
  45. <br>
  46. Latitude:
  47. <input id="form_lat" name="Latitude:" type="text" value="15.0000">
  48. <br>
  49. Longitude:
  50. <input id="form_lon" name="Latitude:" type="text" value="-90.0000">
  51. <br>
  52. <button onclick="wazeManipulate()">Change Coordinates in Waze Map</button>
  53. <br>
  54. Some coordinates for fun:
  55. <br>
  56. Mobile Alabama
  57. <br>
  58. Latitude 30.68502
  59. <br>
  60. Longitude -88.05372
  61. <br>
  62. Times Square
  63. <br>
  64. Latitude 40.75955
  65. <br>
  66. Longitude -73.98547
  67. <br>
  68. <script>
  69. function wazeManipulate() {
  70.     // get the latitude and longitude from the input forms
  71.     var lat = document.getElementById("form_lat").value;
  72.     var lon = document.getElementById("form_lon").value;
  73.     var srcpart1 = "https://embed.waze.com/iframe?zoom=12&lat=";
  74.     var srcpart2 = "&lon=";
  75.     var srcpart3 = "&width=500&height=400&pin=1";
  76.     var embed_url = srcpart1 + lat + srcpart2 + lon + srcpart3;
  77.     document.getElementById("form_lat").value = lat;
  78.     document.getElementById("form_lon").value = lon;
  79.     document.getElementById("wazeframe1").src = embed_url;
  80.     var contents1 = document.getElementById("wazeframe1").src;
  81.     //alert(contents1);
  82. };
  83. </script>
  84. </body>
  85. </html>
Advertisement
RAW Paste Data Copied
Advertisement