Клуб API Карт

Клуб API Карт

Карта в модальном окне

Пост в архиве.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
            type="text/javascript"></script> 
 
    <script type="text/javascript"> 
        ymaps.ready(init);
 
        function init () {
            ymaps.geocode('Череповец <? echo $_GET['adr'] ?>', { results: 1 }).then(function (res) {
                var firstGeoObject = res.geoObjects.get(0);
                window.myMap = new ymaps.Map("map", {
                    center: firstGeoObject.geometry.getCoordinates(),
                    zoom: 15
                });
myMap.geoObjects.add (res.geoObjects.get(0));
   myMap.controls
        .add('zoomControl', { left: 5, top: 5 });
            })
        }
    </script> 
</head> 
 
<body> 
<div id="map" style="width: 400px; height: 400px"></div> 
</body> 
 
</html> 

 

 

Открываю его в модальном окне через FancyBox, окно открывается но карта не отображается, после закрытия окна и снова открытия карта показывается.
После перезагрузки страницы баг повторяется.

9 комментариев
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 02:36

http://clubs.ya.ru/mapsapi/posts.xml?tag=150004532

anton.bogoradov
28 января 2016, 02:36

А как это применить к модальным окнам уж простите новичка.

dimik
28 января 2016, 02:36

после того как контент модального окна отобразится (ведь правда же это произойдет не сразу по клику, а спустя какое-то время, т.е. асинхронно) нужно вызвать указанный метод.

см. пример

anton.bogoradov
28 января 2016, 02:36

Будте добры помогите всё уже перепробывал собстно пример не получается и всё тут. Поиск юзал похожие проблемы находил но решения так и не подчерпнул

zloylos
28 января 2016, 02:36
Дело в том, что Ваше модальное окно — это iframe, а у этих зверят уже свой объект window и т.д. Карта не показывается потому что скрипт из фрейма не может достучаться до ymaps, который объявлен в основном документе.

Можете почитать статью об ajax-транспорте: http://javascript.ru/ajax/transport/iframe
о том как, таки, достучаться до ymaps.

Но для таких целей куда лучше использовать обычные модальные окна, без использования iframe.
anton.bogoradov
28 января 2016, 02:36

Спасибо и вам проблема решилась, только смысл в том что карта и соответственно всё к ней относящееся загружается во внешнем файле а не в основном откуда вызывается на этот случай у FancyBox есть определённый класс для подгрузки в модальном окне сторонних сайтов iframe

zloylos
28 января 2016, 02:36

всё равно не понимаю, зачем нужно загружать что-то во внешний файл, когда можно сделать простой ajax-запрос, получить необходимые данные и показать ноду с картой на странице. 

anton.bogoradov
28 января 2016, 02:36

Ну во первых я только учусь и это для меня было решение по силам, во вторых думаю тут проще get запросом передали адрес и он показался при этом скрипты подгружаються только при необходимости.

a.moklyuchenko
29 марта 2017, 20:50
Подскажите почему на сайте http://granit-ck.in.ua при вызове модального окна (нажатии кнопки телефонной трубки), так же с окном отображается слайдер, менюшка, карта гугл (они были вставлены в шаблон отдельно). Как сделать чтобы модальное окно не закрывал слайдер?