Q:

Marker changes postition when zooming

I'm trying to display Google maps with a marker when user select's he's address from Google Maps Autocomplete API. 
Marker show nearly correct position but if you zoom the map then marker position changes. 
Thank you for your help. 
Demo: https://tap-informatika.hr/testovi/googleMaps.html
Code:
HTML:
<div style="">
      <div id="locationField">
          <label for="">Enter address</label> <br>
          <input id="autocomplete" autofocus placeholder="Enter your address" type="text"></input>
      </div>
      <br><br>
      <h3>Result</h3>
      <div>
          <div>
              <label for="">City</label> <br>
              <input type="text" id="city">
          </div>
          <div>
              <label for="">Street</label> <br>
              <input type="text" id="street">
          </div>
      </div>

      <div id="map"></div>
  </div>

CSS:
body{
    width: 900px;
    margin: auto;
}
input{
    width: 100%;
    padding: 5px 10px;
    outline: 0;
    border-width: 0 0 2px;
    border-color: #33691E;
}
div{
    padding: 20px 5px;
}
#map {
    width: 800px;
    height: 400px;
    margin: auto;
}

Javascript:
var placeSearch, autocomplete;
  function initAutocomplete() {
    autocomplete = new google.maps.places. Autocomplete(
        /** @type {! HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});
    autocomplete.addListener('place_changed', fillInAddress);
  }
  function fillInAddress() {
    var place = autocomplete.getPlace();         
    var address = '';

    console.log(place);

    for (var i = 0; i < place.address_components.length; i++){
        if(place.address_components[i]['types'][0] == 'route'){
            address = place.address_components[i]['long_name'];
        }
        if(place.address_components[i]['types'][0] == 'locality'){
            var address = place.address_components[i]['long_name'];
        }
    }
    for (var i = 0; i < place.address_components.length; i++){
        if(place.address_components[i]['types'][0] == "street_number"){
            address = address + ' ' + place.address_components[i]['long_name'];
        }
    }
    document.getElementById('street').value = address;
    document.getElementById('city').value = city;
    var marLoc = new google.maps. LatLng(place.geometry.location.lat(),place.geometry.location.lng());

    var map = new google.maps. Map(document.getElementById('map'), {
        zoom: 17,
        center: marLoc
    });

    var marker = new google.maps. Marker({
        position: marLoc,
        map: map
    });

}

A:

Your style is conflicting with the map...
Remove the section:
div{
    padding: 20px 5px;
}

and the zooming issue is gone

Troubleshooting/debugging cases like this I would recommend you to start strip things off from your demo, see what triggers the issue. 
I started with a big clean up to your demo, got it to a bare minimum:
<! DOCTYPE html>
<html>
    <head>
        <style> #map { width: 800px; height: 400px} </style>
    </head>
    <body>
        <label for="">Enter address</label> <br>
        <input id="autocomplete" autofocus placeholder="Enter your address" type="text"></input>
        <div id="map"></div>
        <script>
            var autocomplete;
            function initAutocomplete() {
                autocomplete = new google.maps.places. Autocomplete(
                    (document.getElementById('autocomplete')),
                    {types: ['geocode']});
                autocomplete.addListener('place_changed', fillInAddress);
            }
            function fillInAddress() {
                var place = autocomplete.getPlace();
                var marLoc = new google.maps. LatLng(place.geometry.location.lat(),place.geometry.location.lng());
                var map = new google.maps. Map(document.getElementById('map'), { zoom: 17, center: marLoc });
                var marker = new google.maps. Marker({ position: marLoc, map: map });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDv6zFowPwykhVGM_n-VBYtwTkM61n_cvk&libraries=places&callback=initAutocomplete"
        async defer></script>
    </body>
</html>

Seen that the issue is gone then is not a bug in Google markers, then it is the code, start stripping thing one by one, once I removed the div style everything was working.