Simple Map

by Wolf

HTML

<div>
<div>
<h1>
Lorem Ipsum
</h1>
</div>
<div id="map" class="foo map"></div>
<div>
Footer
</div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&ver=4.9.8" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
.foo {
  margin-bottom: 50px;  
 }
.map {
  height: 300px;
  overflow: hidden;
  border-radius: 2px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
}

JavaScript

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}