@props(['mapId' => 'map', 'lat' => 31.0301446, 'lng' => 31.3617244, 'placeName' => 'Location', 'zoom' => 13])
<div>
    <input hidden type="text" id="lat" value="{{ $lat }}" name="lat" style="width: 200px" />
    <input hidden type="text" id="lng" value="{{ $lng }}" name="lng" style="width: 200px" />
    <div id="{{ $mapId }}" style="height: 450px;"></div>
</div>



@push('scripts')
    <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-locationpicker/0.1.12/locationpicker.jquery.js"
        integrity="sha512-AR9dz+gbmrsSrWyaGDdUeS5z1kCejMjYbdQeHHdqrdOdyzs8x4LuDkLIjT1x34G71PS9o9RONhk24tN+sDYiYg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $('#{{ $mapId }}').locationpicker({
            location: {
                latitude: {{ $lat }},
                longitude: {{ $lng }}
            },
            radius: 0,
            inputBinding: {
                latitudeInput: $('#lat'),
                longitudeInput: $('#lng') //,
                // locationNameInput: $('.input-hotel')
            },
            enableAutocomplete: true,
            onchanged: function(currentLocation, radius, isMarkerDropped) {
                $('#lat').val(currentLocation.latitude);
                $('#lng').val(currentLocation.longitude);
            }
        });
    </script>
@endpush