kalanaw/gist:e812cd334c91bfff36a2f455e21bde8d

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Playground</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width-device-width">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
    /* Set the size of the div element that contains the map */
   #map {
     height: 400px;  /* The height is 400 pixels */
     width: 100%;  /* The width is the width of the web page */
    }
 </style>
</head>
<body>
  <section id="homepage" data-role="page">
    <header data-role="header"><h1>Some silly playground</h1></header>
    <div class="content" data-role="content">
      <p>
        Our content goes here.
      </p>
      <div id="map"></div>
    </div>
    <footer data-role="footer"><h1>(C) 2018</h1></footer>
  </section>
  <script>
    // Initialize and add the map
    function initMap() {
      // The location of Uluru
      var uluru = {lat: -25.344, lng: 131.036};
      // The map, centered at Uluru
      var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 4, center: uluru});
      // The marker, positioned at Uluru
      var marker = new google.maps.Marker({position: uluru, map: map});
    }
        </script>
        <!--Load the API from the specified URL
        * The async attribute allows the browser to render the page while the API loads
        * The key parameter will contain your own API key (which is not needed for this tutorial)
        * The callback parameter executes the initMap() function
        -->
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQHk1bZEcK5l-r1R1pelyAPpeaiQ3gltE&callback=initMap">
        </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Mobile Playground</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width-device-width">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<style>
	/* Set the size of the div element that contains the map */
	#map {
	height: 400px; /* The height is 400 pixels */
	width: 100%; /* The width is the width of the web page */
	}
	</style>
	</head>
	<body>
	<section id="homepage" data-role="page">
	<header data-role="header"><h1>Some silly playground</h1></header>
	<div class="content" data-role="content">
	<p>
	Our content goes here.
	</p>
	<div id="map"></div>
	</div>
	<footer data-role="footer"><h1>(C) 2018</h1></footer>
	</section>
	<script>
	// Initialize and add the map
	function initMap() {
	// The location of Uluru
	var uluru = {lat: -25.344, lng: 131.036};
	// The map, centered at Uluru
	var map = new google.maps.Map(
	document.getElementById('map'), {zoom: 4, center: uluru});
	// The marker, positioned at Uluru
	var marker = new google.maps.Marker({position: uluru, map: map});
	}
	</script>
	<!--Load the API from the specified URL
	* The async attribute allows the browser to render the page while the API loads
	* The key parameter will contain your own API key (which is not needed for this tutorial)
	* The callback parameter executes the initMap() function
	-->
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQHk1bZEcK5l-r1R1pelyAPpeaiQ3gltE&callback=initMap">
	</script>
	</body>
	</html>