Pastebin

<!DOCTYPE html>
<html>
  <head>
      
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


  </head>
  <body>
    <div class="row">
        <div class="col-sm-2">
            <img src="" class="update-icon" alt>
            <h4>HARİTA</h4>
        </div>
        <div class="col-sm-10">

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="lat">Enlem</label>
                        <input class="form-control input-sm" placeholder="Enlem / LAT" name="lat" type="text" id="lat">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="lng">Boylam</label>
                        <input class="form-control input-sm" placeholder="Boylam / LNG" name="lng" type="text" id="lng">
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    <input class="form-control input-sm" id="geocodeSearch" placeholder="Adres ara" name="geocodeSearch" type="text">
                </div>
            </div>
            <div id="map">

            </div>

            <p>
                <a href="javascript:;" class="btn btn-primary btn-xs" id="mapDelete"><i class="fa fa-times fa-fw"></i> Sıfırla</a>
                <a href="javascript:;" class="btn btn-primary btn-xs" id="mapReset"><i class="fa fa-refresh fa-fw"></i> Geri</a>
            </p>


        </div>
    </div>

    <script>

$(document).ready(function () {
 
            var latInput = $('#lat');
            var lngInput = $('#lng');
            var currentLat = latInput.val();
            var currentLng = lngInput.val();
            var geocodeSearch = $('#geocodeSearch');
            var defaultPlace = new google.maps.LatLng(39.09596294, 34.93309021);
            var geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 6,
                center: defaultPlace,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                panControl: false
            });
            var marker = new google.maps.Marker({
                draggable: true
            });

            var setPosition = function (lat, lng) {
                var pos = new google.maps.LatLng(lat, lng);
                marker.setMap(map);
                marker.setPosition(pos);
                map.setZoom(14);
                map.panTo(pos);
            };

            var setPositionAndInput = function (lat, lng) {
                setPosition(lat, lng);
                latInput.val(lat.toFixed(8));
                lngInput.val(lng.toFixed(8));
            };

            var clearMap = function () {
                marker.setMap(null);
                latInput.val(null);
                lngInput.val(null);
                guessResults.html(null);
                geocodeSearch.val(null);
                map.setZoom(6);
                map.panTo(defaultPlace);
            };

            var resetMap = function () {
                if (currentLat.length && currentLng.length) {
                    setPosition(currentLat, currentLng);
                    latInput.val(currentLat);
                    lngInput.val(currentLng);
                } else {
                    clearMap();
                }
            };

            // Start values
            if (currentLat.length && currentLng.length) {
                setPosition(currentLat, currentLng);
            }

            // Map click
            google.maps.event.addListener(map, 'click', function (event) {
                setPositionAndInput(event.latLng.lat(), event.latLng.lng());
            });

            // Marker dragdrop
            google.maps.event.addListener(marker, 'dragend', function (event) {
                setPositionAndInput(event.latLng.lat(), event.latLng.lng());
            });


            // Search by input with autocomplete
            geocodeSearch.geocomplete().bind("geocode:result", function (event, result) {
                setPositionAndInput(result.geometry.location.lat(), result.geometry.location.lng());
            });


            // Clear map
            $('#mapDelete').click(function () {
                clearMap();
            });

            // Reset to original values
            $('#mapReset').click(function () {
                resetMap();
            });

        });
    </script>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDwaRF0FKHWLXadWuaon_TnPwmM1uAIf-o&libraries=places"></script>
<script type="text/javascript" src="https://www.rehberfx.com/assets/vendor/geocomplete/jquery.geocomplete.min.js"></script>

  </body>
</html>