Время для прочтения: 0 мин. 24 сек.

Карта Google Maps внутри модального окна Twitter Bootstrap

Если вы когда-нибудь пробовали встроить карту Google Maps внутрь модального окна Twitter Bootstrap, то, наверняка, сталкивались с такой проблемой: при открытии карты отображается лишь маленький ее кусочек. При изменении размеров окна браузера (например, открытии консоли) - карта растягивается на всю ширину модального окна.

Чтобы пофиксить данный баг, достаточно вызвать триггер карты Google Maps resize при открытии модального окна Twitter Bootstrap (событие shown.bs.modal):


$(function() {
	var $modal = $('#modal'),
		$map = $('#map');
	$modal.on('shown.bs.modal', function () {
		google.maps.event.trigger($map[0], 'resize');
	});
});

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Алексей Спесивцев

    Интересное решение, в закладки! а скажите, есть проблема с выводом карты другим способом. Слой карты начинает «работать» еще до вызова модального окошка. меню как бы перекрыто и присутствует курсор карты (ладошечка)
    Вот здесь:

    comfort.маршрут22.рф/

    Думаю, может в этом дело:

    Есть чем заменить?

    Это код javascript:

    window.onload = getMyLocation; //Вызываем функцию, которую создадим чуть ниже, она срабатывает сразу же после загрузки нашего сайта.

    function getMyLocation () { //собственно наша функция для определения местоположения
    if (navigator.geolocation) { //для начала надо проверить, доступна ли геолокация, а то еще у некоторых браузеры то древние. Там о таком и не слышали.
    navigator.geolocation.getCurrentPosition(
    displayLocation, displayError,
    {enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 60000}); //если все ок, то вызываем метод getCurrentPosition и передаем ей нашу функцию displayLocation, реализую ее ниже.
    }
    else {
    alert("Упс, геолокация не поддерживается. Возможно, Вы используете устаревший браузер"); //выведем сообщение для старых браузеров.
    }
    }

    function displayLocation(position) { //передаем в нашу функцию объект position - этот объект содержит ширину и долготу и еще массу всяких вещей.
    var mylat = position.coords.latitude; // извлекаем широту
    var mylong = position.coords.longitude; // извлекаем долготу
    //Теперь пришло время все это записать в наш DOM
    var div = document.getElementById("location");//получаем доступ к нашему элементу location в DOM
    div.innerHTML = " Данные о Вашем местоположении широта: " + mylat + ", долгота: " + mylong
    ; //Вставляем нужнные данные в DOM.

    //Загружаем Google Map
    var latlng = new google.maps.LatLng(mylat, mylong);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.MAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //Добавляем маркер
    var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title:"Вы здесь!"
    });
    };

    function displayError (error) { //вот наш обработчик, API интерфейс передает сюда объект error.
    var errorTypes = {//объект error содержит числовые значения от 0 до 3. Вот собственно с нашим массивом мы и будем сравнивать его.
    0: "Неизвестная ошибка",
    1: "Доступ запрещен",
    2: "Координаты не определены",
    3: "Время запроса истекло"
    };
    var errorMessage = errorTypes[error.code];//свойство code объекта error даст нам числовое значение
    if (error.code == 0 || error.code == 2) {
    errorMessage = errorMessage + " " + error.message; //message свойство объекта error, которое содержит иногда текстовое сообщение
    }
    var div = document.getElementById('location');
    div.innerHTML = errorMessage; //собственно уведомляем пользователя об ошибке.
    //заметьте, мы не рассматриваем другие ошибки, так как это бессмысленно, ниже в статье дам комментарий.
    }

    А это CSS: помогите пжста!

    /* Базовые стили модального окна */
    .overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    display: block;
    pointer-events: none;
    z-index: -999999;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    }
    .overlay:target {
    display: block;
    pointer-events: auto;
    /*visibility: visible;
    opacity: 1;*/
    }

    .popup img{
    display: inline;
    border: none;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffff;
    }
    .popup {
    width: 850px;
    height: 500px;
    background-color: #fff;
    border: 3px solid #fff;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    font: 14px Helvetica, Arial, Sans-Serif;
    top: 8%;
    visibility: hidden;
    display: inline-block;
    /*pointer-events: none;*/
    z-index: 1110;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
    }
    .overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
    }
    /* Кнопка закрытия окна */
    .close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    }
    .close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 14px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    }
    .close:hover {
    background-color: rgba(64, 128, 128, 0.8);
    }
    .popup p, .popup div {
    margin-bottom: 10px;
    }

    html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    }
    #map_canvas {
    width: 100%;
    height: 100%;
    }

    • Я так понял, что проблема решена? У вас на сайте все норм.