Карта Google не работает во всплывающем / модальном режиме в браузере Safari

Question

Проверьте это видео, оно работает в браузере Chrome.

https://www.screencast.com/t/gOLH7YFAt

Проверьте следующее видео, оно не работает в браузере Safari. Но когда я перемещаю карту Google, она начинает показываться.

https://www.screencast.com/t/Rtpvsb8n9 

Пожалуйста, проверьте мой код:

Всплывающая кнопка в контроллере:

->addColumn('address', function($q) {
            $lat = $long = $map = '';
            if (!empty($q->location)) {
                $lat = $q->location->lat;
                $long = $q->location->long;
                $map = '<a title="View Location" data-toggle="modal" data-target="#myModal" data-lat="'.$lat.'" data-lng="'.$long.'" style="cursor: pointer;text-decoration:underline;">'. $q->address .'</a>';
            } 
            return $map;
})

Модель и скрипт в файле вида:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" 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" id="myModalLabel">Location</h4>
                </div>
                <div class="modal-body">

                <div class="row">
                    <div class="col-md-12 modal_body_map">
                    <div class="location-map" id="location-map">
                        <div style="width: 600px; height: 400px;" id="map_canvas"></div>
                    </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Сценарий:

<script>
    $(document).ready(function () {
       $('#myModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            initializeGMap(button.data('lat'), button.data('lng'));
            $("#location-map").css("width", "100%");
            $("#map_canvas").css("width", "100%");
        });

        $('#myModal').on('shown.bs.modal', function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(myLatlng);
        });
    });

    var map = null;
    var myMarker;
    var myLatlng;
    function initializeGMap(lat, lng) {
        myLatlng = new google.maps.LatLng(lat, lng);

        var myOptions = {
            zoom: 12,
            zoomControl: true,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        myMarker = new google.maps.Marker({
        position: myLatlng
        });
        myMarker.setMap(map);
    }
</script>

Пожалуйста, помогите мне, спасибо заранее