JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="page-1">
    <div data-role="content" style="min-height: 200px;">
        	<h1>Page 1</h1>

        <div id="get">
             <h3>Get position results:</h3>

            <div class="results"></div>
        </div>
    </div>
    <div class="common-footer" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page-1">Page 1</a>
                </li>
                <li><a href="#page-2">Page 2</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page-2">
    <div data-role="content" style="min-height: 200px;">
        	<h1>Page 2</h1>

    </div>
    <div class="common-footer" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page-1">Page 1</a>
                </li>
                <li><a href="#page-2">Page 2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.results {
    border: 1px solid #ccc;
    padding: 2%;
    margin: 3%;
}

JavaScript

$(window).load(function() {
 var x = 0;
 
 function getLocation() {
  if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(showPosition, showError);
   x = 1;
  }
 }
 
 function showPosition(position) {
  var latlon = position.coords.latitude+","+position.coords.longitude;
  
  var mapURL = '<iframe width="600" height="450" frameborder="0" style="border:0"src="https://www.google.com/maps/embed/v1/directions?origin=' +latlon+ 'a&destination=-33.8719729,151.2635423&key=AIzaSyBygolBoLl71JGR0VRH26qA7hJJVj1bR_0"></iframe>';
  
  $('#get .results').append("<img src='" +mapURL+"'>");
  
  console.log(latlon);
 }
 
 function showError(error) {
  var mapURL = '<iframe width="600" height="450" frameborder="0" style="border:0"src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBygolBoLl71JGR0VRH26qA7hJJVj1bR_0&q=-33.8719729,151.2635423"></iframe>';
  
  document.getElementById("map-holder").innerHTML = "<img src='" +mapURL+"'>";
 }
});