Untitled

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 valLat  = "{{$pool['alamat']['0']['latitude']}}";
    var valLong = "{{$pool['alamat']['0']['longitude']}}";
    var newLat = valLat - 0.0018;


    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(valLat, valLong), new google.maps.LatLng(newLat, valLong));


    
    google.maps.event.addListener(map, 'click', function(event) {
    taruhMarker(this, event.latLng);
    marker.setMap(null);
    });

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

    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);