Клуб API Карт

Всплывающее окно и yandex map

Katanay
22 декабря 2010, 16:03

Здравствуйте.

Столкнулся с необходимостью добавить на сайт Яндекс-карту, причем открываться она должна во всплывающем окне.

Для этого создал следующий код:

Код

<a href="#" onclick="document.getElementById('wind').style.display='block'; return false;" title="Всплывающее окно">Открыть карту</a>

<div id="wind">

<?php

$city = $_GET["city"];

$street = $_GET["str"];

$house = $_GET["house"];

$zapros = $city.',+'.$street.'+улица,+дом+'.$house;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<title>Слой пробок на Яндекс.Карте</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=Тут_у_меня_ключ_прописан&modules=traffic" type="text/javascript"></script> 

<script language="JavaScript" type="text/javascript">

var map; 

// Создание обработчика для события window.onLoad

        YMaps.jQuery(function () {

            // Создание экземпляра карты и его привязка к созданному контейнеру

            map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

            // Установка для карты ее центра и масштаба

            map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 11);

map.addControl(new YMaps.Zoom());

       map.addControl(new YMaps.TypeControl());        

map.addControl(new YMaps.ToolBar());

// создание элемента управления "Пробки"

            var traffic = new YMaps.Traffic.Control();

// добавление элемента управления "Пробки" на карту

            map.addControl(traffic);

// включение показа пробок

            traffic.show();

// Создание и добавление YMapsML-документа на карту

            var ml = new YMaps.YMapsML('http://geocode-maps.yandex.ru/1.x/?geocode=Саратов,+Танкистов+улица,+дом+62&key=Тут_у_меня_ключ_прописан');

            // Обработчик успешной загрузки YMapsML

            YMaps.Events.observe(ml, ml.Events.Load, function (ml, error) {

                var geoResult = ml.get(0).get(0);

                geoResult.description = geoResult.metaDataProperty.GeocoderMetaData.text;

                map.addOverlay(geoResult);

                map.setBounds(geoResult.getBounds());

            });

            // Обработчик неудачной загрузки YMapsML

            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {

                alert('Ошибка: ' + error);

            });

});

</script> 

</head> 

<body> 

<div id="YMapsID" style="width:600px; height:400px;"></div> 

</body> 

</html>

<button type="button" value="закрыть" onclick="document.getElementById('wind').style.display='none'; return false;">

закрыть</button>

В итоге при открытии этой карты отображается все управление, но не отображается сам слой с картой.

Убираю из этого кода причуду с открыванием во всплывающем окне - все работает нормально, все нормально отображается. Собственно код для карты прежде чем вставить сюда попробовал на отдельной странице.

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

Гуру, подскажите пожалуйста решение проблемы. Как заставить карту открываться во всплывающем окне?

13 комментариев
Подписаться на комментарии к посту
Зачем вы вставляете в div#wind
html с доктайпом?
Это же не iframe
подскажете тогда как реализовать такую задачу?
У Вас есть div#wind - popup
В него вставьте контейнер карты


подключение апи и весь ваш js
в него вставлять не надо.
Оставьте их там где они расположены в примерах.

Оберните создание карты в функцию
после создания карты в этой же функции
сделайте попап видимым

document.getElem

entById('wind').style.display='block'



после этого сделайте

map.redraw();

Рекомендую также прочитать про jQuery
он доступен в апи как YMaps.jQuery
и тогда колбАсы типа



станут краткими и лаконичными

window.$ = YMaps.jQuery;

$('button.open').click(function () {
$('#wind').show();
return false;
});

$('button.close').click(function () {
$('#wind').hide();
return false;
});


Была такая проблема, нужно было решать быстро, поэтому сделали на костылях: вместо переключения display:block|none — left:-1000px|0px
* Боевые значения поставить по вкусу :)
эх. к сожалению не подходит...
Если вы создание карты уберете с domReady с вызовите именно при открытие этого вот попапа - все заработает.

http://neowebtime.ru/3/

все работает в ифрейме

а как? очень нуждаюсь!

так вы в код загляните и уивидите как

Столкнулся с такой же проблемой. Реализовал с помощью ajax в код открытия вставил условие при первом открытии добовлять в контейнер карту maps.php заодно и основная страница быстрее грузится стала.

if (ob==1) {
$.ajax({
url: "maps.php",
cache: false,
success: function(html){
if (oobb==0) {
$('#container').append(html);
oobb=1;}
}  }); }

Вы все о всплавающей карте, созданной какими то скриптами говорите. А как заставить открываться во всплывающейм окне карту, созданную в современном редакторе яндекса? Они сейчас дают такой код

Добрый день, возможно кто-нибудь знает как заменить POPUP окно для метки на карте, которое описано а API на своё собственное, кастомизированное? Вроде бы в тему, заранее благодарю :)

Лучше создавать новую тему чем писать в теме 4 летней давности

Пример собственного макета балуна есть в песочнице

http://api.yandex.ru/maps/jsbox/2.1/placemark_balloon_layout