Размещаем свои фотографии на Яндекс.Карте

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

Будет хорошим решением расположить миниатюры фотографий на карте.

Также это может пригодиться, чтобы рассказать об интересных местах своего города.

В этой заметке я расскажу как это сделать и создать сервис аналогичний Яндекс.Фоткам.

Для примера я буду размещать фотографии театров Нижнего Новгорода на Яндекс.Карте.

С начала, с помощью любого растрового графического редактора, необходимо получить уменьшенные изображения:  50х42 пикселя – для значков меток, 500х375 – для изображения в балуне.

После этого, зная адреса куда необходимо привязать фотографии, нужно определить географические координаты, использую инструмент для определения координат по адресу http://api.yandex.ru/maps/tools/getlonglat/

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

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

С начала мы определяем стиль для значка метки commonStyle.

<repr:Style gml:id="commonStyle"> 
            <repr:iconStyle> 
                <repr:size x="54" y="42"></repr:size>
                <repr:offset x="-27" y="-16"></repr:offset> 				
            </repr:iconStyle>
        <repr:balloonContentStyle>
                <repr:template>#balloonTemplate</repr:template>
            </repr:balloonContentStyle>
        </repr:Style>

После этого, используя наследование стилей, задаем стиль значка метки для каждой фотографии.

<repr:Style gml:id="styleDramtheatr"> 
            <repr:parentStyle>#commonStyle</repr:parentStyle> 
            <repr:iconStyle> 
                <repr:href>http://webmap-blog.ru/xml/foto-ymap/dram-theatr-50.jpg</repr:href> 
            </repr:iconStyle> 			 
        </repr:Style>

Определяем шаблон содержимого балуна balloonTemplate

<repr:Template gml:id="balloonTemplate">
            <repr:text>
                <![CDATA[<div style="font-weight:bold;padding-bottom:5px;color:#ff0000">$[name]</div><div align="center"><a rel="nofollow" href="http://picasaweb.google.com/lh/photo/$[metaDataProperty.AnyMetaData.link]" target="_blank"><img src="http://webmap-blog.ru/xml/foto-ymap/$[metaDataProperty.AnyMetaData.img]"></div></a>]]>
            </repr:text>
        </repr:Template>

Для каждой метки мы задаем необходимые параметры

<ymaps:GeoObject id="theate1"> 
                <gml:name>Нижегородский государственный академический театр драмы имени М. Горького</gml:name>
                <gml:metaDataProperty> 
                        <AnyMetaData>
                           <link>G_RliIVHNsX_eusB76vs_lTJ03VgkdjfiCiVX0zy_ts?feat=directlink</link>						
						   <img>dram-theatr-500.jpg</img>                            
                        </AnyMetaData> 
                    </gml:metaDataProperty> 				
                <gml:Point> 
                    <gml:pos>44.00136 56.324117</gml:pos> 
                </gml:Point> 
                <ymaps:style>#styleDramtheatr</ymaps:style> 
            </ymaps:GeoObject>

Посмотреть полный код файла photo-map.xml

Выводим наш YMapsML-файл на карту, используя пример по адресу http://api.yandex.ru/maps/jsapi/examples/visualisationymapsml.html

Заменяем центр карты и путь к YMapsML-файлу.

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

Можно автоматизировать создание YMapsML-файла.

Опишу, как это можно сделать.

Если у Вас есть уже фотогалерея на сайте, на странице для одной фотографии добавить ссылку – добавить на карту.

По нажатию на которую,  появляется форма для ввода адреса или сразу значений координат.

Определить координаты по адресу можно сформировав HTTP-запрос к геокодеру, а затем обработав ответ.

Используя библиотеку gdlib PHP можно получить файлы с изображениями для значка метки и балуна.

И затем также средствами php сформировать  YMapsML-файл.