displaymap.html

<head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #mymap {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
 <div id="mymap"></div>
     <script>
             var mymap;
         var mylat = 40.3516366;
         var mylon = -74.6602049;
             function initMap() {
                 mymap = new google.maps.Map(document.getElementById('mymap'), {
center: {lat: mylat, lng: mylon},
                     zoom: 14
                 });
                 mymarker = new google.maps.Marker({
                     position:  {lat: mylat, lng: mylon},
                     map: mymap,
                     title: 'blah!'
                 }); 
             }
      </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8PHbWdt77mc0Bpy7J9-NO5IFzh-V-NG4&callback=initMap"
    async defer></script>
  </body>