Map with Marker

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s6"><a href="#test1">Test 1</a></li>
      <li class="tab col s6"><a href="#test2" class="active">Test 2</a></li>
    </ul>
  </div>

  <div id="test1" class="col s12">
                
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
  </div>

  <div id="test2" class="col s12">
    2
  </div>

</div>

CSS

#map {
  height: 400px;
  width: 100%;
 }

JavaScript

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}