JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

<!DOCTYPE html">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>

  <body id="body">
    <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>
    <script src="https://maps.google.com/maps/api/js?v=3.32&callback=loadMapsApi&key=AIzaSyCOW7b0eVJzLBlTz1eY9XP04VJ48C_uaMQ" async defer></script>
  </body>

</html>

JavaScript

let map = null;

function loadMapsApi() {
  let map_page = document.getElementById('map_page');
  let home = document.getElementById('home');
  window.onload = doPageSwap;
  window.onhashchange = doPageSwap;
}

function doPageSwap() {
  console.log(window.location.hash);
  if (window.location.hash == '#map_page') {
    if (!map) {
      show(map_page);
      hide(home);
      map = new google.maps.Map(document.getElementById('myMap'), {
        center: {
          lat: -34.397,
          lng: 150.644
        },
        zoom: 8
      });
    }
  } else {
    hide(map_page);
    show(home);
    if (map) {
      google.maps.event.trigger(map, "resize");
      map = null;
      document.getElementById('myMap').innerHTML = '';
    }
  }
}

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

function show(el) {
  el.style.display = 'block';
}

function hide(el) {
  el.style.display = 'none';
}