вторник, 28 апреля 2009 г.

Формат файлов KML и его использование на картах Google. Введение.

KML (Keyhole Markup Language — язык разметки Keyhole) - это формат файлов, который используется отображения географических данных в программах Google Планета Земля, Карты Google и Карты Google для мобильных устройств.

KML использует основанную на тегах структуру с вложенными элементами и атрибутами и создан на основе стандарта XML.

Для создания файлов KML можно использовать программу Google Планета Земля (Google Earth), редактор XML или обычный текстовый редактор.

Файлы KML и связанные с ними изображения (при наличии) можно сжимать с помощью формата ZIP в архивы KMZ.

С помощью файлов KML можно:

  • устанавливать различные значки и делать подписи для обозначения мест на поверхности Земли,

  • создавать различные ракурсы для выбранных объектов, изменяя положение камеры,

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

  • определять стили для настройки отображения объекта, применять код HTML для создания гиперссылок и встроенных изображений,

  • использовать папки для иерархической группировки элементов,

  • динамически получать и обновлять файлы KML из удаленных или локальных узлов сети,

  • получать данные KML в соответствии с изменениями в средстве трехмерного просмотра,

  • отображать текстурные трехмерные объекты COLLADA


В качестве объектов в файлах формата  KML могут быть использованы:

Метки (объект Placemark) – самый простой элемент, задает метку – обозначение положения на поверхности Земли с помощью значка в виде желтой кнопки.

Пути – линии определенной толщины и цвета

Многоугольники - определяется цвет линий и цвет подписи.

Изображения - накладываемые изображения поверхности Земли позволяют накладывать изображение на ландшафт Земли, могут быть перемещаемыми и масштабируемыми, так и не перемещаемыми, например, логотип.

Трёхмерная модель - позволяет подключать описание трёхмерных объектов (например, зданий и сооружений). Трёхмерную модель можно задать двумя способами: заданием высоты плоских фигур (вытягиванием) и ссылкой на полноценную модель в формате COLLADA (Google SketchUp).

Простейший пример файла KML.

<?xml version="1.0" standalone="yes"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Placemark>
<name>Дворец спорта</name>
<description>Дворец спорта «Нагорный» просп. Гагарина, 29</description>
<Point>
<coordinates>43.979459,56.291908,0 </coordinates>
</Point>
</Placemark>
</kml>


Опишу структуру этого файла.

Первая строка - заголовок XML. Это 1-я строка в каждом файле KML. Перед этой строкой не должно быть пробелов или символов.

Вторая строка – служит для объявления пространства имен KML. Это 2-я строка в каждом файле KML 2.1.

Объект Placemark, содержащий следующие элементы:

- name, ярлык, используемый для обозначения метки

- description, описание, появляющееся в окне комментария, прикрепленном к метке

- Point, указывает положение метки на поверхности Земли (долгота, широта и дополнительно высота).

Этот файл Вы можете загрузить в программе Google Планета Земля (Google Earth) выбрав в меню Файл – Открыть.

KML-файл в Google Earth

Его также можно загрузить использую API карт Google.

Код примера:

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

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

<head>

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

<title>Пример использования Google Earth на сайте</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"

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

<script type="text/javascript">



function initialize() {if (GBrowserIsCompatible()) {geoXml = new GGeoXml("http://remont.cek.ru/xml/prim_kml_1.kml");

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(56.291908,43.979459), 15);

map.setMapType(G_SATELLITE_MAP);

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.addOverlay(geoXml);

}

}



</script></head>

<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas" style="width: 500px; height: 300px"></div>

</body>

</html>



Если загрузить его в браузере мы увидим

KML-файл загрузка с помощью API карт Google

Вы также можете просмотреть файл KML на Картах Google.

Предварительно необходимо чтобы Ваш файл KML должен быть размещен на веб-сайте в Интернете.

С начала нужно зайти по адресу http://maps.google.ru/

Затем в строке поиска ввести адрес Вашего KML-файла в интернете, например, http://webmap-blog.ru/examples/kml/prim_kml_1.kml и нажать на кнопку «Поиск на карте».

Ваш KML-файл отобразиться на карте Google.

KML-файл загрузка на Картах Google

Продолжение следует...

суббота, 25 апреля 2009 г.

Обзор программы Google Earth (Планета Земля)

В июне 2005 года через несколько месяцев после появления Google Maps Google представила программу Google Earth

Google Earth -  программа-«виртуальный глобус» компании Google, с помощью которой можно просматривать трехмерную модель Земли, аэро- и космоснимки высокого разрешения и различные слои данных.

Русская версия Google Earth имеет название Google Планета Земля.

Google Earth интерфейс программы

Программа изначально была выпущена компанией Keyhole Inc. и называлась Earth Viewer, а в 2004 году была продана компании Google.

Для визуализации изображения используется трёхмерная модель всего земного шара (с учётом высоты над уровнем моря), которая отображается на экране при помощи интерфейсов DirectX или OpenGL. Пользователь может легко перемещаться в любую точку планеты, управляя положением «виртуальной камеры».

Официальный сайт программы http://earth.google.com

Существуют различные версии программы:

Google Планета Земля - бесплатная версия

Google Планета Земля Про (цена = 400$ в год) - возможность сохранения снимков в графический файл с более высоким разрешением.

Лицензия для коммерческого использования.

Google Планета Земля - решения для предприятий

Бесплатная и расширенные версии используют одну базу геоданных (снимки и дополнительные слои).

Основные возможности бесплатной версии Google Earth.

- Измерение расстояния пути

- Распечатка и сохранение снимков

- Открытие в браузере Google Maps

- Функции поиска мест и маршрутов, быстрый переход по координатам

- Обзор мест (меток) - автоматический перелёт

- Имеется большое количество дополнительных данных, которые можно подключить по желанию пользователя. Например, названия населённых пунктов, водоёмов, аэропортов, дороги, ж/д, и др. информация. Кроме этого, для крупных городов имеется более подробная информация — названия улиц, магазины, заправки, гостиницы, и т. д.

- Пользователи могут создавать свои метки, рисовать пути и многоугольники, накладывать свои изображения поверх спутниковых (это могут быть карты, или более детальные снимки, полученные из других источников, а также 3D модели!). Эти метки можно сохранять в файлы KML и обмениваться с другими пользователями программы

- Переход по фотографиям - некоторые фотографии с высоким разрешением поддерживают возможность перемещения по ним

- Добавление фотографий

- Настройки средства 3D просмотра

- Использование горячих клавиш

- В программу встроен авиасимулятор (для его запуска нажмите Ctrl + Alt + A).

- В версии 4.2 появился режим Google Sky, позволяющий рассматривать звёздное небо.

- При наведении мыши на местность Google Планета Земля показывает приблизительную дату съёмки изображений внизу окна трехмерного просмотра

- Отображение Солнца и солнечных лучей

- Установка начального местоположения - можно установить отправную точку (по умолчанию), которая будет появляться при каждом запуске программы Google Планета Земля.

- Использование просмотра улиц Google Street View - просмотр 360VR панорамных снимков

В феврале 2009 года компания Google выпустила 5-ую версию программы Google Earth, в которой появились следующие возможности:

- Режим «Исторические снимки» - появилась возможность переключать версии снимков, т.е. перемещаться во времени.

- Добавлена 3D модель планеты Марс. Спутниковые снимки отдельных районов Марса выполнены в высоком разрешении.

- Появилась возможность перемещаться под водой. Поверхность дна мирового океана представляет собой 3D текстурированную модель.

- Инструмент записи туров. C помощью этого инструмента можно записать свои перемещения в Google Earth, сопроводить их голосовыми комментариями и сохранить их в KML формате.

В Google Earth имеется возможность с помощью слоя «рельеф» включить отображение 3D модели поверхности Земли.

Также есть слой, который включает загрузку 3D моделей зданий (серых примитивов и фотореалистичных).

Модели зданий создают специалисты компании Google и пользователи с помощью специального 3D редактора Google SketchUp.

В мае 2008г. компнией Google был представлен API для просмотра Google Earth в окне браузера.

Google Earth API работает не во всех браузерах. Для примера, в Опере он работать отказывается. Браузер должен поддерживать работу ActiveX.

Для работы в режиме Google Earth необходимо установить специальный плагин.

С начала необходимо скачать инстолятор GoogleEarthPluginSetup_en.exe (299Кб), при запуске которого выкачивается сам плагин googleearth-plugin-win.exe (его размер > 6,5Мб).

Затем предлагается произвести перезагрузку браузера. После перезагрузке нужно разрешить браузеру установку ActiveX. Видим сообщение:

С подключаемым модулем Google Планета Земля возникла проблема. Попробуйте перезагрузить страницу.

Перезагружаем. После перезагрузки Google Earth в браузере заработал!

Скорость работы и управление Web-приложения такие же как и у полноценной программы Google Earth.

Некоторые полезные ссылки по API просмотра Google Earth:

Руководство для разработчиков (англ.) http://code.google.com/intl/ru/apis/earth/documentation/index.html

Галерея демо проектов http://code.google.com/intl/ru/apis/earth/documentation/demogallery.html

Примеры использования http://earth-api-samples.googlecode.com/svn/trunk/examples/

Если у Вас уже есть ключ для API Google Maps, то для использования режима просмотра Google Earth Вам нужно добавить в свой код одну строчку

map.addMapType(G_SATELLITE_3D_MAP);

Тогда при открытии страницы с картой в браузере Вы увидите следующее

Google Earth пример карты с кнопкой Земля

Появилась новая кнопка типа карт – Земля, нажав на которую Вы увидите карту в режиме Google Earth (предварительно необходимо установить плагин).

Google Earth вид в браузере

Посмотреть работающий пример и исходный код можно здесь.

четверг, 23 апреля 2009 г.

Добавляем поиск по адресу на Яндекс.Карту

В заметках ранее мы используя API Яндекс.Карт создали карту с элементами управления и добавили на нее метку.

В этой заметке мы добавим к нашей карте возможность поиска по адресу.

Для начала мы возьмем уже готовый пример кода для заметки «Яндекс. Карты – добавляем элементы управления» .

Вот этот код:

<!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>

<meta http-equiv=”Content-Type” content=”text/html” />

<script src=”http://api-maps.yandex.ru/1.0/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”

type=”text/javascript”></script><script type=”text/javascript” charset=”utf-8?>

var map;

function init () {

map = new YMaps.Map( document.getElementById(”YMapsID”) );

map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,

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

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

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

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

map.addControl(new YMaps.ScaleLine());}

</script>

</head>



<body onload=”init();”><div id=”YMapsID” style=”height:400px; width:600px;”></div></body>

</html>



Для реализации поиска по адресу на карте необходимо к нашему примеру сделать следующие добавления.

  1. Форму для ввода адреса.

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


Здесь я употребил слово геокодер. Что это такое?

Геокодер – это специальный сервис, который позволяет определять координаты и получать сведения о географическом объекте по его названию или адресу.

Процесс работы с геокодером называется геокодированием.

Для работы с геокодером в API Яндекс.Карт используются специальные объекты  YMaps.Geocoder и YMaps.GeocoderResult. Они позволяют отправлять запросы геокодеру, получать информацию о статусе и результате процесса геокодирования и получать результаты геокодирования в виде меток карты.

Подробнее о геокодировании можно узнать из руководства разработчика по адресу http://api.yandex.ru/maps/jsapi/doc/dg/concepts/geocoder.xml

И так мы добавляем в наш пример форму поиска.

В раздел BODY перед картой добавляем следующий код:

<form action="#" onsubmit="showAddress(this.address.value);return false;"><p><input type="text" id="address" style="width:525px;" value="Нижний Новгород" />

<input type="submit" value="Искать" />

</p>

</form>



В раздел HEAD после функции init следующую функцию:

function showAddress (value) {map.removeOverlay(geoResult);var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {

if (this.length()) {

geoResult = this.get(0);

map.addOverlay(geoResult);

map.setBounds(geoResult.getBounds());

}else {

alert("Ничего не найдено")

}

});

YMaps.Events.observe(geocoder, geocoder.Events.Fault,

function (error) {alert("Произошла ошибка: " + error.message)});

}



Форма уже содержит значение Нижний Новгород для поиска.

В нее необходимо ввести искомый адрес.

Введенный адрес (значение переменной value) передается функции showAddress.

В ней сначала мы удаляем все оверлеи (объект, привязанный по географическим координатам, который отображается поверх карты, в частности открытый балун) строка map.removeOverlay(geoResult);

Затем в строке var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

запускаем процесс геокодирования.

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

Иначе выводим сообщение: «Ничего не найдено».

Последние две строки функции служат для вывода сообщения об ошибке геокодирования.

Загрузим наш пример в браузере и проверим его работу.

Пример Яндекс.Карты с формой поиска

Найдем для примера следующий адрес: Нижний Новгород, ул. Белинского, 59

Введем его в строку поиска и нажмем Найти.

Получим найденный результат.

Пример Яндекс.Карты - Результат поиска

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

На странице к созданной функции можно обращаться используя ссылку, например,

<a href="javascript:showAddress(‘Нижний Новгород, ул. Белинского, 59’)"> Нижний Новгород, ул. Белинского, 59</a>

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

суббота, 18 апреля 2009 г.

Доработка плагина Яндекс.Карт для Joomla

Мне задали такой вопрос: «Подскажите, каким образом нужно прописать в .php плагина “Яндекс-Карты”, чтобы отобразились элементы ToolBar (панель инструментов) , ScaleLine(линейка)?».

В этой заметке я расскажу как это сделать на примере добавления элемента ToolBar (панель инструментов).

Используя ftp-клиент мы заходим на сервер Вашего сайта в папку, где установлена Joomla.

Находим там папку plugins, а в ней папку content.

В этой папке должны находиться два файла: plugin_yandexmap.xml и plugin_yandexmap.php

Их мы и будем редактировать.

Открываем сначала файл plugin_yandexmap.xml в любом текстовом редакторе или Блокноте.

Находим в нем следующие строки:

<param name="showMiniMap" type="radio" size= "1" default="0" label="YMAP_SHOWMINIM" description="YMAP_SHOWMINIM_D"><option value="1">YMAP_YES</option>

<option value="0">YMAP_NO</option>

</param>



Здесь прописываются элементы формы для добавления обзорной миникарты в режиме администрирования.

Копируем данные строки и вставляем перед ними.

Изменяем вставленный код следующим образом:

<param name="showToolBar" type="radio" size= "1" default="0" label="YMAP_SHOWTOOLBAR" description="YMAP_SHOWTOOLBAR_D"><option value="1">YMAP_YES</option>

<option value="0">YMAP_NO</option>

</param>



Сохраняем изменненый файл на сервер.






Joomla - Профессиональный сайт за один день
86 видеоуроков, 12 часов 46 минут посвящены лучшей системе для создания сайтов - Joomla!




Затем редактируем файл plugin_yandexmap.php.

Находим в нем строки

if (intval($my_params['showMiniMap'])) {$mmControl = 'var minimapControl = new YMaps.MiniMap();';

$mmControl .= 'map.addControl(minimapControl);';

} else {

$mmControl = '';

}



Копируем и вставляем данный блок кода перед ними.

Изменяем его следующим образом

if (intval($my_params['showToolBar'])) {$toolbarControl = 'var toolbarControl = new YMaps.ToolBar();';

$toolbarControl .= 'map.addControl(toolbarControl);';

} else {

$toolbarControl = '';

}



Еще ищем строку '.$mmControl.' И перед ней добавляем строчку  '.$toolbarControl.'

Сохраняем измененный файл на сервер.

Заходим на сайт на странице администрирования заходим в менеджер плагинов и выбираем плагин Content - Yandex Maps.

Открываем его для редактирования.

В правой части окна, среди параметров должен появиться новый YMAP_SHOWTOOLBAR и два переключателя состояния YMAP_YES и YMAP_NO.

Отмечаем состояние YMAP_YES и сохраняем изменения.

Открываем страницу с Яндекс.Картой. На карте должен появиться новый элемент управления YMaps.ToolBar.

Скачать измененные файлы: plugin_yandexmap.xml и plugin_yandexmap.php

Посмотреть пример в действии

Аналогично можно добавить и элемент управления ScaleLine – масштабную линейку.

Добавляем форму поиска на карту Google

И так в предыдущих заметках об использовании API Google Maps  мы научились размещать карту на собственном сайте, добавлять на нее информационные окна (балуны) и метки.


Теперь для создания полноценного сервиса мы узнаем, как добавить к карте форму поиска.


Для этого необходимо пройти несколько этапов.




  1. Для осуществления поиска существует специальная служба  API поиска Google AJAX.

  2. Мы возьмем уже готовый пример использования карт Google из заметки «Добавляем элементы управления на карту Google Maps» и изменим его.

  3. В раздел HEAD после строки вызова  URL-адреса расположения  файла JavaScript, содержащего все символы и определения, необходимые для работы с API Карт Google с ключом


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g"    type="text/javascript"></script>

Добовляем код

<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>

<style type="text/css">

@import url("http://www.google.com/uds/css/gsearch.css");

@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");

</style>

В нем мы указываем URL-адрес API поиска Google AJAX.

Далее мы  загружаем таблицы стилей для данного элемента управления.

4. После строки кода map.addControl(new GMapTypeControl()); мы добавляем следующее

map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));

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

И после закрывающейся скобки функции initialize() строку

GSearch.setOnLoadCallback(initialize);

Определяет вызов метода после того, как поиск будет завершен.

5. После этого загружаем страницу с примером в браузере и наблюдаем следующее

Пример API Карт Google c формой поиска

Проверим работу.

Наберем в строке поиска Москва, ул. Волхонка, 15 (это адрес Храма Христа Спасителя)

Мы увидим результат поиска

Пример API Карт Google - результаты поиска

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

В строке <div id="map_canvas" style="width: 500px; height: 300px"></div> заменяем значения width на 800px и height на 600px.

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

Давайте изменим положения элементов управления для  карты на свои.

Метод addControl() принимает необязательный второй параметр GControlPosition, который позволяет указать позицию элемента управления на карте.

Углы карты указываются с помощью специальных значений:

G_ANCHOR_TOP_RIGHT – правый верхний угол,

G_ANCHOR_TOP_LEFT – левый верхний угол,

G_ANCHOR_BOTTOM_RIGHT – правый нижний угол,

G_ANCHOR_BOTTOM_LEFT – левый нижний угол.

С помощью параметра GControlPosition можно при желании указать смещение элемента управления относительно края карты (в пикселах).

мещение задается при помощи объекта GSize.

В нашем случае, мы задавали расположения элемента поиска в правом нижнем углу со смещением 10 пикселей в лево и 20 в верх.

Давайте поменяем местами элементы управления для поиска и типа карты.

В строку map.addControl(new GMapTypeControl()); перед закрывающейся скобкой с точкой запятой  нужно добавить следующий код:

, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))

Мы задаем смещение для элемента управления типом карты от правого нижнего угла 10 пикселей в лево и 20 в верх.

А для формы поиска изменить значения G_ANCHOR_BOTTOM_RIGHT на G_ANCHOR_TOP_RIGHT, а также величину смещения new GSize(10,20) на new GSize(10,10).

Загружаем страницу в браузере и наблюдаем

Пример API Карт Google c формой поиска - изменение положения элементов управления

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

воскресенье, 12 апреля 2009 г.

Две карты Яндекса на одной странице

В этой заметке я хочу рассказать Вам о том, как можно использовать две карты Яндекса на одной странице.

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

Для реализации мы возьмем уже готовый пример, который использовался нами в заметке:" Продолжаем работать с маркерами используя API Яндекс.Карт".

Работающий пример находиться по адресу http://webmap-blog.ru/examples/ymap_pr_0.html

Мы возьмем и скопируем участок кода

map = new YMaps.Map( document.getElementById("YMapsID") );map.setCenter(new YMaps.GeoPoint(43.979459,56.291908), 15,YMaps.MapType.MAP);

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

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

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

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

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



И вставим его перед закрывающейся фигурной скобкой.

Мы добавили код настроек для второй карты.

Затем в копии кода заменим обозначение map на map2 и  YMapsID на YMapsID2 .

Также заменим тип карты с YMaps.MapType.MAP на YMaps.MapType.SATELLITE.

В разделе body добавим следующий код

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



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

Загружаем пример в браузере и наблюдаем

Две Яндекс.Карты на одной странице

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

Можно еще усложнить наш пример,  встроив вторую карту в балун первой.

С начала мы удалим несколько строк кода.

Удаляем строки map.addControl(new YMaps.MiniMap()); и map2.addControl(new YMaps.MiniMap()); - элемент управления обзорная карта.

Удаляем оставшиеся элементы управления у второй карты.

Строки

map2.addControl(new YMaps.TypeControl());map2.addControl(new YMaps.ToolBar());map2.addControl(new YMaps.Zoom());

map2.addControl(new YMaps.ScaleLine());



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

var content = document.createElement('span');content.innerHTML = "Дворец спорта";map.openBalloon(new YMaps.GeoPoint(43.979459,56.291908), content);



Также удаляе строки из секции body

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



Затем добавляем ко второй карте элемент управления YMaps.SmallZoom строкой

map2.addControl(new YMaps.SmallZoom());

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

var point = new YMaps.GeoPoint(43.979459,56.291908); - точка расположения метки и балуна

var placemark = new YMaps.Placemark(point); - определяем балун

placemark.setBalloonContent('<div style="text-align:center"><strong>Дворец спорта</strong><br><div id="YMapsID2" style="height:200px; width:300px;"></div><br>проспект Гагарина, д. 29</div>'); - содержимое балуна html-код с определением области второй карты.

map.addOverlay(placemark); - добавляем балун на карту

placemark.openBalloon(); - открываем балун

Снимок во второй карте имеет некоторое смещение по координатам относительно первой карты.

Для правельного центрирования изменим значение центра для второй карты и величину масштаба на 43.979288,56.291384 и 16 соответственно.

Увеличи размер окна первой карты height:600px и width:800px

Загружаем наш пример в браузере и наблюдаем результат.

Две Яндекс.Карты на одной странице - карта в балуне

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

Плагин Яндекс.Карт для Joomla

В этой заметке я хочу рассказать Вам о плагине для встраивания Яндекс.Карт в свободно распространяемую CMS Joomla.

Этот плагин разработан командой проекта YAR-IT и загрузить его можно по адресу http://yar-it.com/download/11-joomla-1/14-plugin/29-plg_ymap01.html

Он устанавливается стандартным способом для плагинов Joomla.






Joomla - Профессиональный сайт за один день
86 видеоуроков, 12 часов 46 минут посвящены лучшей системе для создания сайтов - Joomla!




После установки необходимо его включить и настроить.

Мы заходим в Plugin Manager (менеджер плагинов) и находим в таблице запись Content - Yandex Maps.

Щелкаем по ссылке и попадаем в окно редактирования параметров плагина.

Окно редактирования параметров плагина

Щелкните по картинке для того, чтобы посмотреть ее в полный размер.

В правой части мы будем задавать параметры для отображения Яндекс.Карты.

В поле YMAP_API – вводим API-ключь для Вашего сайта,

в поля YMAP_WIDTH и YMAP_HEIGHT – ширину и высоту окна карты (в пискселях px или %),

далее в поля YMAP_LAT и YMAP_LON – координаты центра карты (широту и долготу) ,

в YMAP_ZOOM – масштабный уровень карты.

Далее идут несколько переключателей для задания элементов управления картой.

YMAP_ZOOMTYPE – задает тип элемента масштабирования:

YMAP_ZOOMTYPE_N - YMaps.Zoom – элемент масштабирования, который позволяет менять разрешение карты с определенным шагом;

YMAP_ZOOMTYPE_S - YMaps.SmallZoom – компактный элемент масштабирования (без слайдера, только кнопки уменьшения и увеличения масштаба),

YMAP_ZOOMTYPE_O - без элемента масштабирования .

YMAP_MAPTYPE – задает тип отображения карты:

YMAP_MAPTYPE_S – обычная карта,

YMAP_MAPTYPE_SP – спутниковый снимок.

YMAP_MAPTYPE_G – гибрид.

YMAP_SHOWMAPTYPE - включает и выключает элемент управления, позволяющий выбрать различные типы карты.

YMAP_SHOWMINIM - отображать или нет обзорную карту

YMAP_SCROLLZOOM - включает и выключает возможность масштабирования с помощью колесика мыши

YMAP_DBLCLIKZ – включает и выключает возможность центрирования карты по двойному щелчку мыши.

В опциях ниже задаются координаты для двух меток, текст метки и html-код в балуне, который открывается по щелчку на метке.

YMAP_PLACEMARK – отображать или нет метку

YMAP_LATPL – координата метки по широте

YMAP_LONPL – координата метки по долготе

YMAP_TEXT – текст в метке

YMAP_OPENM - отображать или нет балун

YMAP_CONT – содержимое балуна.

Для включения плагина необходимо включить опцию Enabled в левой части окна.

Сохранить сделанные настройки.

Для добавления карты на страницу в нужном месте необходимо вставить строку {ymap}.

Пример отображения

Пример использования плагина Яндекс.Карт для Joomla

Посмотреть рабочий пример можно здесь.

среда, 8 апреля 2009 г.

Использование информационного окна с API Google Maps

В этой заметке мы научимся добавлять информационные окна на карту Google.

Каждая карта может одновременно отображать только одно информационное окно типа GInfoWindow, которое отображает HTML в плавающем окне над картой. Это информационное окно похоже на пузырь с репликами героев в комиксах; оно состоит из содержательной области и заостренного хвостика, конец которого находится в указанной точке карты.

У объекта GInfoWindow нет конструктора. Информационное окно автоматически создается и прикрепляется к карте во время ее создания. Для одной карты может выводиться только одно информационное окно, но его можно перемещать и изменять его содержание.

При использовании объекта GMap2 доступен метод openInfoWindow(), в котором точка и элемент HTML DOM рассматриваются как аргументы. Элемент HTML DOM вставляется в контейнер информационного окна, и оно закрепляется в заданной точке.

Метод openInfoWindowHtml() объекта GMap2 аналогичен, но в качестве второго аргумента он использует строку HTML вместо элемента DOM.

Для создания информационного окна необходимо вызвать метод openInfoWindow() и передать ему положение и элемент DOM.

Давайте добавим информационное окно к примеру, который использовался в заметке «Добавляем элементы управления на карту Google Maps».

Заменив в нем элемент управления GLargeMapControl на GSmallMapControl.

Код примера:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Пример API Карт Google на языке JavaScript </title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"

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

<script type="text/javascript">

function initialize() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(56.32811,44.0), 10);

map.addControl(new GSmallMapControl ());

map.addControl(new GMapTypeControl());

}}

</script></head>

<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas" style="width: 500px; height: 300px"></div>

</body>

</html>



Загрузив его в браузере, мы увидим следующее

Пример карты Google с элементами управления

Добавим к ниму следущие строчки

map.openInfoWindow(map.getCenter(),document.createTextNode("Нижний Новгород"));



после строки map.addControl(new GMapTypeControl());

Тогда, загрузив страницу в браузере, мы увидим

Пример GoogleMaps информационное окно (балун)

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

Давайте теперь в информационное окно добавим HTML-код, а на карте покажем маркер, кликнув по которому будет открываться окно с информацией.

В начале, мы изменим координаты центра карты и масштаб отображения.

Заменим строку map.setCenter(new GLatLng(56.32811,44.0), 10); на map.setCenter(new GLatLng(56.315455,44.017152), 16);

А затем добавим строку map.setMapType(G_SATELLITE_MAP); - мы установим тип карты для загрузки спутниковый снимок (т.к. карта Нижнего Новгорода не содержит домов, чтобы точно указать местоположение я использую снимок).

Для обработки клика на маркере и вывода информационного окна я использую дополнительную функцию createMarker.

Вот ее код:

function createMarker(point,html) {var marker = new GMarker(point);GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html);

});

return marker;

}



Помещаю его перед строчкой </script>

А в функции initialize после строки  map.addControl(new GMapTypeControl()); добавляю следующее

var point = new GLatLng(56.31572,44.017158);var marker = createMarker(point,'<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>')map.addOverlay(marker);



Загружаем страницу с примером в браузере

Пример GoogleMaps информационное окно - маркер

Кликнув по маркеру мы видим информационное окно

Пример GoogleMaps информационное окно

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

воскресенье, 5 апреля 2009 г.

Продолжаем работать с маркерами используя API Яндекс.Карт

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

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

Балун может содержать в себе как текст, так и HTML-содержимое.

Одновременно на карте может быть только один балун класса YMaps.Balloon.

Для объекта YMaps.Balloon нет необходимости вызывать конструктор, он создается автоматически при вызове конструктора карты и существует в единственном экземпляре. Поэтому балун на карте может быть только один и все, что с ним можно сделать - это переместить его в другое место и сменить его содержимое.

Объект YMaps.Map предлагает метод openBalloon, который принимает на вход геоточку и DOM-элемент. DOM-элемент дописывается к контейнеру балуна.

Пример добавления:

var content = document.createElement('span');

content.innerHTML = "Дворец спорта";

map.openBalloon(new YMaps.GeoPoint(43.979459,56.291908), content);

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

Можно добавить балун уже к существующей метке.

Мы возьмем пример из предыдущей заметки код с размещением маркера со своим значком и изменим его.

Код примера:

<!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>

<meta http-equiv="Content-Type" content="text/html" />

<script src="http://api-maps.yandex.ru/0.8/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw=="

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

<script type="text/javascript" charset="utf-8">

var map;

function init () {

map = new YMaps.Map( document.getElementById("YMapsID") );

map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15,

YMaps.MapType.MAP);

var s = new YMaps.Style();

s.iconStyle = new YMaps.IconStyle();

s.iconStyle.offset = new YMaps.Point(-15, -15);

s.iconStyle.href = "files/theater.png";

s.iconStyle.size = new YMaps.Point(30, 30);


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


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

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

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

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

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point, {style: s});map.addOverlay(placemark);



}

</script>

</head>

<body onload="init();">

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

</body>

</html>

После строки var placemark = new YMaps.Placemark(point, {style: s}); мы добавим следущий код:

placemark.setBalloonContent('Оперный театр им. А. С. Пушкина ');

Здесь в качестве содержимого балуна мы добавляем текстовую строку «Оперный театр им. А. С. Пушкина».

И после строки map.addOverlay(placemark); добавляем еще строчку

placemark.openBalloon();

Для открытия балуна.

Загружаем страницу с кодом в браузере и наблюдаем

Добавляем балун

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

Щелкнув по которому откроется балун с текстом.

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

В место строки текста можно вставить кусок HTML-кода, например,

<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>

Тогда мы увидим следующее

Балун с html-содержимым

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

Мы можем задавать стили для отображения содержимого балуна.

За это отвечает класс YMaps.BalloonContentStyle.

Возьмем первый пример из данной заметки и зададим красный цвет для текста и полужирное начертание.

Порядок работы такой.

В начале мы создаем шаблон для отображения содержимого балуна и помещаем его в хранилище с ключом my#template.

var t = new YMaps.Template();

t.text = "<div style=\"color:#ff000;  font-weight: bold;\">$[description]</div>";

YMaps.Templates.add("my#template", t);

Затем BalloonContentStyle связывается с созданным шаблоном и полученный стиль применяется к метке.

s.balloonContentStyle = new YMaps.BalloonContentStyle("my#template");

Заменяем строку placemark.setBalloonContent('<strong>Оперный театр им. А. С. Пушкина</strong>');

на placemark.description = 'Оперный театр им. А. С. Пушкина';

Загружая страницу с кодом в браузере, получаем

Балун со стилем

Привожу полный код примера:

<!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>

<meta http-equiv="Content-Type" content="text/html" />

<script src="http://api-maps.yandex.ru/0.8/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw=="

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

<script type="text/javascript" charset="utf-8">

var map;

function init () {

map = new YMaps.Map( document.getElementById("YMapsID") );

map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15,

YMaps.MapType.MAP);



var t = new YMaps.Template();

t.text = "<div style=\"color:#ff0000; font-weight: bold;\">$[description]</div>";

YMaps.Templates.add("my#template", t);

var s = new YMaps.Style();

s.iconStyle = new YMaps.IconStyle();

s.iconStyle.offset = new YMaps.Point(-15, -15);

s.iconStyle.href = "files/theater.png";

s.iconStyle.size = new YMaps.Point(30, 30);



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

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

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

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

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

s.balloonContentStyle = new YMaps.BalloonContentStyle("my#template");

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point, {style: s});

placemark.description = 'Оперный театр им. А. С. Пушкина';

map.addOverlay(placemark);

placemark.openBalloon();

}

</script>

</head>

<body onload="init();">

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

</body>

</html>

Посмотреть его в действии можно здесь.

Узнать подробнее о балунах можно в руководстве разработчика по адресу http://api.yandex.ru/maps/jsapi/doc/dg/concepts/balloon.xml