Untitled

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

        document.getElementById("latitude").value = posisiTitik.lat();
        document.getElementById("longitude").value = posisiTitik.lng();
        
    }
    
    function initialize() {
        var markers = [];
        var map = new google.maps.Map(document.getElementById("map-canvas"), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 17,
        });

        let  lat = document.getElementById("latitude").value;
        let long = document.getElementById("longitude").value;
        var latlng = new google.maps.LatLng(lat, long);

        if (lat && long) {
          var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(lat, long), new google.maps.LatLng(lat, long));
        
          let tanda = new google.maps.Marker({
            map: map,
            // url: './assets/images/logo-sm.png',
            position: latlng,
            draggable: false,
            animation: google.maps.Animation.DROP,
            anchorPoint: new google.maps.Point(0, -29)
        });
        } else{
          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) {
          // tanda.setVisible(false);
        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));

        // [START region_getplaces]
        // Listen for the event fired when the user selects an item from the
        // pick list. Retrieve the matching places for that item.
        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]

        // Bias the SearchBox results towards places that are within the bounds of the
        // current map's viewport.
        google.maps.event.addListener(map, "bounds_changed", function () {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
        });
    }

    google.maps.event.addDomListener(window, "load", initialize);