My guess, without seeing your code, is that you need to trigger a map resize event after the bootstrap modal has been shown.

Bootstrap modal

Maps events

$('#myModal').on('', function () {
    google.maps.event.trigger(map, 'resize');


Here is a complete and working example. As per my comment, you should 1) Trigger a map resize and 2) set the map center to your marker coordinates.

var center = new google.maps.LatLng(59.76522, 18.35002);

function initialize() {

    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: center

$('.launch-map').on('click', function () {

        backdrop: 'static',
        keyboard: false
    }).on('', function () {
        google.maps.event.trigger(map, 'resize');


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s