Google map not working on second load with javascript

Question

I've seen a couple of questions in regards to a similar issue, but none of them solved my problem, so I'll go ahead.

I have a following issue with Google maps: I try to load a modal dialog with a Google map calling it using javascript:

<html>
    <body>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

        <a onclick="locationDetail(76)" id="76" data-toggle="modal" data-target="#myModalLocationDetails">Edit</a>

        <div id="myModalLocationDetails" class="modal modal modal-metro border-mauve fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: none;">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div id="locationEdit" class="col-md-12">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </body>
</html>

JavaScript function:

function locationDetail(locId) {
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function () {
            initialize(44.7862, 20.45345);
        }
    );
}

Code that loads in #locationEdit(LocationEdit.html) is:

<html>
<head></head>
<body>
<script type="text/javascript">

function initialize(latitude, longitude) {

    var myLatlng = new google.maps.LatLng(latitude, longitude);

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 12,
        center: myLatlng,
        //mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        panControl: true
    });

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

</script>

<div id="map-canvas">
</div>
<button type="button" class="btn btn-primary" onclick="initialize(44.7862, 20.45345)">Update</button>
</body>
</html>

When I click on Edit, modal dialog shows up (style turns from display="none" to display="block") and map shows up ok. When I close the modal dialog clicking Close and load modal dialog again with a click on Edit, my map shows broken, as on the image on the question: Google Maps Api v3 Maps in Ui-Tabs are cut

When I click Update map loads well! It seems to be the problem with calling initialize() function in .load()...or not...i don't know.

I tried this solution: - Google Maps Api v3 Maps in Ui-Tabs are cut also this: - jquery click doesn't work on ajax generated content

These solutions didn't work for me. Thanks a lot for your sugestions!

EDIT: I solved the issue calling bootstrap event:

$(function() {
    $('#myModalLocationDetails').on('shown.bs.modal', function () {
        initialize(44.7862, 20.45345);
    });
});

There is documentation for this event call at http://getbootstrap.com/javascript/#modals-usage .

Do you know some other way of doing this not using bootstrap but some other jquery event? Thanks!

`google.maps.event.trigger(map, 'resize');` as the very last line in `initialize()` didnt work? — davidkonrad, Mar 13 '14 at 16:31

score 0 · Answer 1 · answered Mar 13 '14 at 16:28

Try cleaning up the #locationEdit div before .load() -- something like

function locationDetail(locId) {
    $("#locationEdit").html(''); // or $("#locationEdit").empty();
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function () {
            initialize(44.7862, 20.45345);
        }
    );
}

Google map not working on second load with javascript

1 Answers1