Размещаем flash-видео в балуне на Яндекс.Карте

Автор: | 09.08.2010

Пока я работаю дальше над редактором Яндекс.Карт,  решил написать небольшую заметку о том, как добавить flash-видео в балун с известных сервисов видео хостинга (YouTube, Яндекс Видео, video.mail.ru и т.д.).

Я рассмотрю два способа:

— добавление HTML-кода в балун используйте метод setBalloonContent();

— использование файла в формате YMapsML.

Рассмотрим первый способ.

Реализация его очень простая.

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

Пример кода:

<!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>API Яндекс.Карт - размещаем flash-видео в балуне</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
    <script type="text/javascript"> 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(36.646229,56.601733), 13);
 
			map.addControl(new YMaps.Zoom());
	        map.addControl(new YMaps.TypeControl());
	        map.addControl(new YMaps.ToolBar());
 
            var point = new YMaps.GeoPoint(36.646229,56.601733);
            var placemark = new YMaps.Placemark(point, {style: "default#cinemaIcon"});
 
            map.addOverlay(placemark);			
 
 
        });
    </script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px;height:600px"></div> 
</body> 
 
</html>

В этот код необходимо добавить строку для определения содержимого балуна с помощью метода  setBalloonContent().

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

Например, на YouTube Вы получили такой код для встраивания видео:

<object width="200" height="175"><param name="movie" value="http://www.youtube.com/v/pDoziw0E5Bk&amp;hl=ru_RU&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/pDoziw0E5Bk&amp;hl=ru_RU&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="175"></embed></object>

Для его размещения в балуне необходим следующий код:

placemark.setBalloonContent('<div style="font-weight:bold;padding-bottom:5px;color:#ff0000; text-align: center;">Пелагея - Розы (Нашествие 2010)<br/><br/><object width="200" height="175"><param name="movie" value="http://www.youtube.com/v/pDoziw0E5Bk&amp;hl=ru_RU&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/pDoziw0E5Bk&amp;hl=ru_RU&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="175"></embed></object></div>');

Вы можете добавить заголовок для видео, дописав в начале код:

<div style="font-weight:bold;padding-bottom:5px;color:#ff0000; text-align: center;">Пелагея — Розы (нашествие 2010)<br/><br/>

Можно сразу открыть балун на карте, добавив строку

placemark.openBalloon();

Посмотреть полный код и пример в действии

Второй способ использовать для вывода на карту файл в формате YMapsML.

Здесь наш код для встраивания видео можно поместить в тег description, т.к. в нем можно использовать html-код, в остальных тегах html-разметка экранируется.

Посмотреть пример (видео с различных семинаров Яндекса на карте)

Код примера

<!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>API Яндекс.Карт - размещаем flash-видео в балуне используя файл YMapsML</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
    <script language="JavaScript" type="text/javascript"> 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(55.09735,51.768099), 4);
 
			map.addControl(new YMaps.Zoom());
	        map.addControl(new YMaps.TypeControl());
	        map.addControl(new YMaps.ToolBar());
 
            // Создание и добавление YMapsML-документа на карту
            var ml = new YMaps.YMapsML("http://webmap-blog.ru/xml/semyandexvideo.xml");
            map.addOverlay(ml);
 
            // Обработчик неудачной загрузки YMapsML
            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
                alert('Ошибка: ' + error);
            });
        });
	</script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px; height:600px;"></div> 
</body> 
</html>

Код YMapsML-файла

Размещаем flash-видео в балуне на Яндекс.Карте: 7 комментариев

  1. Саша

    В вашей статье рассмотрен вариант размещения статического flash-ролика. Если необходимо генерировать flash-объект динамически, то можно воспользоваться библиотекой swfobject (http://api.yandex.ru/jslibs/libs.xml#swfobject).

    В клубе разработчиков API Яндекс.Карт уже обсуждался подобный вопрос: http://clubs.ya.ru/mapsapi/replies.xml?item_no=6556

  2. Евгений

    Хорошая статья. Но не как не могу понять, как вставить свою флешку в карту.
    Первым способом все работает, флешка вставляется и управляется.
    Второй способ (который нужен), флеш не отображается хоть тресни! Может кто ниб помочь, подсказать что не так?

  3. Николай

    Здравствуйте, не имею специального образования, но почитав Ваш блог сделал сайт с картой газовых заправок. Теперь хочу сделать базу установщиков газового оборудования, хочу чтобы в балуне на карте была ссылка на страницу сайта.
    Адреса хочу хранить в базе данных, не могу сделать вывод ссылки в балун.

    Код запроса информации из бд, нужная строка web
    $result = mysql_query(«SELECT * FROM stopoint»);
    if(mysql_num_rows($result)>0)
    {
    while ($mar = mysql_fetch_array($result))
    {

    $exp_str1 = explode(«», $mar[‘descriptions’]);

    $mar[‘descriptions’] = implode($exp_str1, «, «);

    echo »;
    echo », $mar[‘name’], »;
    echo »;
    echo »;
    echo htmlspecialchars (stripslashes($mar[«$web»] ));
    echo », $mar[‘phone’], »;

    код балуна
    Телефон: $[metaDataProperty.AnyMetaData.phone]
    Инфо
    email: $[metaDataProperty.AnyMetaData.email]
    Подскажите что не так делаю пожалуйста

    1. admin Автор записи

      Да, в балун можно добавить любой html-код.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *