JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHghk5JGe6f0AQUNWVYTgYvorCcjjsdRM&amp;callback=initMap"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="map"></div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Ajouter un encombrant</h4>
            </div>
            <div class="modal-body">
                <form id="form">
                    <div class="form-group">
                        <textarea class="form-control" rows="3" placeholder="Description" name="description"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputFile">Ajouter une image</label>
                        <input type="file" id="exampleInputFile">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button type="submit">
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

#map{
  height: 400px;
}

JavaScript

function initMap() {

    // Create a map object and specify the DOM element for display.
    map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: false,
        zoom: 13
    });

    //Geolocalisation
    navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };
        map.setCenter(pos);
    });

    map.addListener('click', function(e) {

        $('#myModal').modal('toggle');

        form.addEventListener('click' , function(evt) {

            evt.preventDefault()
            
            placeMarkerAndPanTo(e.latLng, map);

            $('#myModal').modal('hide');

        });
        
        google.maps.event.clearListeners(map, 'bounds_changed');

    });

}

function placeMarkerAndPanTo(latLng, map) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

    $('#myModal').modal('hide');
}

initMap()