JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

<!DOCTYPE html">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?v=3.32&callback=loadMapsApi" async defer>


    </script>
  </head>

  <body id >
    <div data-role="page" id="home">
      <div role="main" class="ui-content">
        <a href="#map_page">Map</a>
      </div>
    </div>
    <div data-role="page" id="map_page">
      <div data-role="header" data-position="fixed">
        <a href="#" data-rel="back" class="header-btn ui-btn-left">Back</a>
      </div>
      <div data-role="main" class="ui-content" style="background:lightgray;">
        <div id="myMap" style="width:300px; height:300px; top:30px;">
        </div>
      </div>
    </div>
  </body>

</html>

JavaScript

var map;
var map_fix = 0;
var show_map = false;

function loadMapsApi() {
  $("body").pagecontainer({
    show: function(event, ui) {
      if (window.location.hash != 'map_page') {
        if (!map) {
          $("div#map_page").show();
          $("div#home").hide();
          map = new google.maps.Map(document.getElementById('myMap'), {
            center: {
              lat: -34.397,
              lng: 150.644
            },
            zoom: 8
          });
        }
      } else {
        $("div#map_page").hide();
        $("div#home").show();
        if (map) {
          google.maps.event.trigger(map, "resize");
          map = null;
          $('#myMap').empty();
        }
      }
    }
  });
}

function goBack() {
  window.history.back();
}