Пока я работаю дальше над редактором Яндекс.Карт, решил написать небольшую заметку о том, как добавить 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&hl=ru_RU&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/pDoziw0E5Bk&hl=ru_RU&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&hl=ru_RU&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/pDoziw0E5Bk&hl=ru_RU&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> |
В вашей статье рассмотрен вариант размещения статического flash-ролика. Если необходимо генерировать flash-объект динамически, то можно воспользоваться библиотекой swfobject (http://api.yandex.ru/jslibs/libs.xml#swfobject).
В клубе разработчиков API Яндекс.Карт уже обсуждался подобный вопрос: http://clubs.ya.ru/mapsapi/replies.xml?item_no=6556
Хорошая статья. Но не как не могу понять, как вставить свою флешку в карту.
Первым способом все работает, флешка вставляется и управляется.
Второй способ (который нужен), флеш не отображается хоть тресни! Может кто ниб помочь, подсказать что не так?
Здравствуйте, не имею специального образования, но почитав Ваш блог сделал сайт с картой газовых заправок. Теперь хочу сделать базу установщиков газового оборудования, хочу чтобы в балуне на карте была ссылка на страницу сайта.
Адреса хочу хранить в базе данных, не могу сделать вывод ссылки в балун.
Код запроса информации из бд, нужная строка 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]
Подскажите что не так делаю пожалуйста
Похожая проблема обсуждалась в клубе Яндекс.Карт ссылка
к сожалению код исказился 🙁
А в Google Maps такое возможно?
Да, в балун можно добавить любой html-код.