<html ng-app="myapp">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    
    <script>
      angular.module('myapp', ['ngMessages']);
    </script>
    <div>
      <h3>My Google Maps Demo</h3>
      <h3>AngularJS 1.6.9 + Google Maps Version 3.32</h3>
      <div id="map"></div>
      <script>
        function initMap() {
          var uluru = {lat: -25.363, lng: 131.044};
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: uluru,
            gestureHandling: "greedy"
          });
          var marker = new google.maps.Marker({
            position: uluru,
            map: map
          });
        }
      </script>
      <script async defer
      src="https://maps.googleapis.com/maps/api/js?&callback=initMap&v=3.32">
      </script>
    </div>
  </body>
</html>

// Code goes here

/* Styles go here */