google map api drag and drop pin in laravel

I want to add drag and drop google Api. I've made a map the but I do not know how to make it can be a drag and drop. in there i want make my latitude and longitude is auto fill when i drop the pin

here my view :

 <label for="inputIsiBerita"> Latitude:</label>
         <input type="text" class="form-control" required name="latitude">
         <label for="inputIsiBerita"> Longitude</label>
         <input type="text" class="form-control" required name="longitude">

here my script :

<script>
              function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                  center: {lat: -7.0157404, lng: 110.4171283},
                  zoom: 12
                });
                var input = /** @type {!HTMLInputElement} */(
                    document.getElementById('pac-input'));

                var types = document.getElementById('type-selector');
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

                var autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.bindTo('bounds', map);

                var infowindow = new google.maps.InfoWindow();
                var marker = new google.maps.Marker({
                  map: map,
                  anchorPoint: new google.maps.Point(0, -29)
                });

                autocomplete.addListener('place_changed', function() {
                  infowindow.close();
                  marker.setVisible(false);
                  var place = autocomplete.getPlace();
                  if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                  }

                  // If the place has a geometry, then present it on a map.
                  if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                  } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);  // Why 17? Because it looks good.
                  }
                  marker.setIcon(/** @type {google.maps.Icon} */({
                    url: 'http://ift.tt/1rXG5Bt',
                    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(35, 35)
                  }));
                  marker.setPosition(place.geometry.location);
                  marker.setVisible(true);

                  var address = '';
                  if (place.address_components) {
                    address = [
                      (place.address_components[0] && place.address_components[0].short_name || ''),
                      (place.address_components[1] && place.address_components[1].short_name || ''),
                      (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                  }

                  var latitude = place.geometry.location.lat();
                  var longitude = place.geometry.location.lng(); 

                  $("input[name=coordinate]").val(address);
                  $("input[name=latitude]").val(latitude);
                  $("input[name=longitude]").val(longitude);

                  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
                  infowindow.open(map, marker);
                });

                // Sets a listener on a radio button to change the filter type on Places
                // Autocomplete.
                function setupClickListener(id, types) {
                  var radioButton = document.getElementById(id);
                  radioButton.addEventListener('click', function() {
                    autocomplete.setTypes(types);
                  });
                }

                setupClickListener('changetype-all', []);
                setupClickListener('changetype-address', ['address']);
                setupClickListener('changetype-establishment', ['establishment']);
                setupClickListener('changetype-geocode', ['geocode']);
              }
            </script>               
            <script src="http://ift.tt/299ixVJ"
        async defer></script>

and when i drag the pin its will auto change the point latitude and longitude

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/299A97n
via IFTTT