Google map wont appear in Bootstrap Modal

I know this has been asked a lot, but I still cant get this resolved. I have a button, when a user clicks on it, a bootstrap modal shows up, which displays a input filed with a google maps. But the google maps doesn't show up, UNLESS I RESIZE THE WINDOW, then it appears.

Here is my button with modal:

<!-- Bootstrap trigger to open modal -->
    <a data-toggle="modal" href="#addLocation" data-target=".bs-example-modal-lg">
        <button class="btn btn-primary">Add Location</button>
    </a>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addLocation" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <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">Create Task</h4>
            </div>
            <div class="modal-body">

                <!-- The async form to send and replace the modals content with its response -->
                <form class="form" data-async data-target="#addLocation" action="" method="POST">
                    {{ csrf_field() }}


                        <div class="form-group {{ $errors->has('location') ? ' has-error' : '' }}">
                            <label for="location">Create Location:</label>
                            <input type="text" name="location" id="pac-input" class="form-control" placeholder="Create a location on the map">
                            @if($errors->has('location'))
                                <span class="help-block">{{ $errors->first('location') }}</span>
                            @endif
                        </div>

                        <div id="map" style="height: 500px; width: 100%"></div>

                        <div class="form-group{{ $errors->has('lat') ? ' has-error' : '' }}">
                            <label for="lat">Lat:</label>
                            <input type="text" class="form-control input-sm" name="lat" id="lat" value="{{ old('lat') }}">
                            @if($errors->has('lat'))
                                <span class="help-block">{{ $errors->first('lat') }}</span>
                            @endif
                        </div>
                        <div class="form-group{{ $errors->has('lng') ? ' has-error' : '' }}">
                            <label for="lng">Lng:</label>
                            <input type="text" class="form-control input-sm" name="lng" id="lng" value="{{ old('lng') }}">
                            @if($errors->has('lng'))
                                <span class="help-block">{{ $errors->first('lng') }}</span>
                            @endif
                        </div>


                    <br />
                    <button type="submit" class="btn btn-primary" id="create">Create</button>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

And here is my Google maps code:

  <script async defer src="https://maps.googleapis.com/maps/api/js?key={MY-KEY-IS-HERE}&libraries=places&callback=initAutocomplete"></script>

        <script>
            function initAutocomplete() {

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {
                        lat: 34.173985,
                        lng: -83.107242
                    },
                    zoom: 9,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var marker = new google.maps.Marker({
                    position: {
                        lat: 34.3630003,
                        lng: -84.332207
                    },
                    map: map,
                    animation: google.maps.Animation.DROP,
                    draggable: true
                });


                var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));

                google.maps.event.addListener(searchBox, 'places_changed', function() {
                    var places = searchBox.getPlaces();
                    var bounds = new google.maps.LatLngBounds();
                    var i, place;

                    for (i=0; place=places[i]; i++) {
                        bounds.extend(place.geometry.location);
                        marker.setPosition(place.geometry.location);
                    }

                    map.fitBounds(bounds);
                    map.setZoom(14);

                });

                google.maps.event.addListener(marker, 'position_changed', function() {
                    var lat = marker.getPosition().lat();
                    var lng = marker.getPosition().lng();

                    $('#lat').val(lat);
                    $('#lng').val(lng);
                });


            }

          // I even added this, but still doesnt work
            $('#addLocation').on('shown', function () {
                google.maps.event.trigger(map, 'resize');
            })
        </script>