JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div ng-app>
    <div ng-controller="MapCtrl">
<div ng-repeat="item in items">
  <input id="fieldsme" type="text" placeholder="Type new location" ng-model="item.direction">
</div>
<button id="buttononmap" ng-click="add()">New box</button>
<div id="routes3-map"></div>
</div>

CSS

#routes3-map {
  height: 100%;
  width: 100%;
  position: absolute;
}


#fieldsme {
  margin-left: 30px;
  margin-top: 50px;
  position: absolute;
  z-index: 1;
}

#buttononmap {
  margin-left: 210px;
  margin-top: 50px;
  position: absolute;
  z-index: 1;
}

JavaScript

function MapCtrl($scope) {
    var myLocation = new google.maps.LatLng(50.2381736,9.9646571);
    var mapOptions = {
      zoom: 8,
      center: myLocation,
      disableDefaultUI: true,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.BIG,
        position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    };
    $scope.map = new google.maps.Map(document.getElementById('routes3-map'), mapOptions);

    $scope.items = [direction=""];

    $scope.add = function () {
      $scope.items.push({
        direction: ""
      });
    };

}