CODEWITHSUNDEEP
jquerygoogle-mapstwitter-bootstrap-3bootstrap-modal
scorpion909
scorpion909

Reputation: 115

Launch Google Map in Bootstrap modal

i'm trying to load Google Map inside Bootstrap 3 modal. Idea is that you have different buttons which opens different maps inside modal.

Problem is that after opening first modal (and closing it) second modal is not rendering map properly.

HTML

<button data-lat="40.7053111" data-lng="-74.2581861" class="btn showMap">New York</button>
<button data-lat="34.0458784" data-lng="-118.2502403" class="btn showMap">Los Angeles</button>

JS

$(document).ready(function() {
    $('.showMap').click(function() {
        mapInit($(this).data('lat'), $(this).data('lng'));
   });
});

function mapInit(lat, lng) {
    var modalElm = $('#mapModal');
    var myLatlng = new google.maps.LatLng(lat, lng);
    var myOptions = { zoom: 10, center: myLatlng };
    map = new google.maps.Map($('#map-canvas')[0], myOptions);
    var marker = new google.maps.Marker({ position: myLatlng, map: map });

    modalElm.modal('show');
    modalElm.on('shown.bs.modal', function() {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(myLatlng);
    });
}

JS FIDDLE DEMO

Thanks for any help

Upvotes: 0

Views: 819

Answers (1)

Jake Taylor
Jake Taylor

Reputation: 4336

It has something to do with the loading time after the canvas clears the first time. If you add the class fade to your modal class then it causes a delay and loads perfectly over and over. I revamped the fiddle a little so your map looks cleaner inside your modal by adding a new <div id ="map-canvas"> inside your modal-body and slightly changing your css properties. Here's the fiddle http://jsfiddle.net/zpj0jefu/8/ If this helps you please make it the accepted answer. If not, let me know and I'll see what I can do to change it for you. :)

Upvotes: 1

Related Questions