Untitled

<style type="text/css">
    #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
    }

    #pac-input:focus {
        border-color: #4d90fe;
    }

    .pac-container {
        font-family: Roboto;
    }

    #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
    }

    #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
    }
</style>

<div class="form-row">
    <div class="col-md-12 mb-3">
        <center>
            <input id="pac-input" class="controls" type="text" placeholder="Cari tempat/lokasi .." />
            <div id="map-canvas" style="width: 100%; height: 380px;"></div>
        </center>
    </div>
</div>
<div class="form-row">
    <div class="col-md-6 mb-3">
        <label class="form-control-label" for="validationCustom03">Latitude</label>
        <input type="text" class="form-control" id="lat" name="lat" placeholder="Masukkan Latitude" required />
    </div>
    <div class="col-md-6 mb-3">
        <label class="form-control-label" for="validationCustom04">Longitude</label>
        <input type="text" class="form-control" id="long" name="long" placeholder="Masukkan Longitude" required />
    </div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places"></script>

<script>

    var marker;

    function taruhMarker(peta, posisiTitik) {
        if (marker) {
            marker.setPosition(posisiTitik);
        } else {
            marker = new google.maps.Marker({
                position: posisiTitik,
                map: peta,
            });
        }

        document.getElementById("lat").value = posisiTitik.lat();
        document.getElementById("long").value = posisiTitik.lng();
    }

    function initialize() {
        var markers = [];
        var map = new google.maps.Map(document.getElementById("map-canvas"), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        });

        var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-6.165646, 106.8214951), new google.maps.LatLng(-6.115646, 106.8214951));

        google.maps.event.addListener(map, "click", function (event) {
            taruhMarker(this, event.latLng);
        });

        map.fitBounds(defaultBounds);

        // Create the search box and link it to the UI element.
        var input = /** @type {HTMLInputElement} */ (document.getElementById("pac-input"));
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        var searchBox = new google.maps.places.SearchBox(/** @type {HTMLInputElement} */ (input));

        google.maps.event.addListener(searchBox, "places_changed", function () {
            var places = searchBox.getPlaces();

            if (places.length == 0) {
                return;
            }
            for (var i = 0, marker; (marker = markers[i]); i++) {
                marker.setMap(null);
            }

            // For each place, get the icon, place name, and location.
            markers = [];
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0, place; (place = places[i]); i++) {
                var image = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25),
                };

                // Create a marker for each place.
                var marker = new google.maps.Marker({
                    map: map,
                    icon: image,
                    title: place.name,
                    position: place.geometry.location,
                });

                markers.push(marker);

                // bounds.extend(place.geometry.location);
            }

            // map.fitBounds(bounds);
            map.fitBounds(places[0].geometry.viewport);
        });
        // [END region_getplaces]

        google.maps.event.addListener(map, "bounds_changed", function () {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
        });
    }

    google.maps.event.addDomListener(window, "load", initialize);
</script>