API Яндекс.Карт создаем ссылку на страницу с картой

При создании сайта, содержащего карту созданную с использованием API Яндекс.Карт, может возникнуть необходимость сформировать ссылку на карту с других страниц сайта (список филиалов организации, справочник организаций и т.д) .

Так чтобы показать конкретное место с масштабированием карты.

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

И так у нас имеется карта Нижнего Новгорода на которой обозначены платежные терминалы «Элекснет», с использованием файла в формате 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>Терминалы Элекснет в Нижнем Новгороде - на карте</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
    <script type="text/javascript"> 
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
 
	    map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
 
            map.enableScrollZoom();
 
            //Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
 
	// Создание YMapsML-документа и добавление его на карту
            var ml = new YMaps.YMapsML("http://webmap-blog.ru/xml/termelexnet.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>

Загружая данный пример в браузере наблюдаем следующее:

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

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

Пример ссылки: http://ваш_сайт/ymap-elexnet.html#ll=43.978076,56.314382&z=17&mt=map&p=43.978076,56.314382

Здесь в ссылке после наименования страницы с картой ymap-elexnet.html идет знак #, а после него передаются параметры для окна карты:

ll – центр окна карты, значения географической долготы и широты;
z – уровень масштаба;
mt – тип карты (map-обычная,sat-спутниковый снимок, hib-гибридная);
p – координаты точки установки маркера.

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

<!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=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
    <script type="text/javascript"> 
window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID")),
                flagLoad = 0;
 
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
 
            map.enableScrollZoom();
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
 
	  // Создание YMapsML-документа и добавление его на карту
            var ml = new YMaps.YMapsML("http://webmap-blog.ru/xml/termelexnet.xml");
            map.addOverlay(ml);
 
           // Обработчик неудачного создание документа YMapsML
            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
                alert("Ошибка: " + error);
            });
 
            // Добавляем метку в центр карты
            var placemark = new YMaps.Placemark(map.getCenter(), {draggable: 1, hasBalloon: 0});
 
            // Динамически формируем урл
            YMaps.Events.observe(map, [map.Events.Update, map.Events.MoveEnd, map.Events.ChangeType], setUrlParams);
            YMaps.Events.observe(placemark, placemark.Events.PositionChange, setUrlParams);
 
            // Функция для формирования параметров в URL'е
            function setUrlParams(obj) {
                // Включаем установку параметров после загрузки всего скрипта
                if (!flagLoad) {
                    return;
                }
                document.location.hash = '#ll=' + map.getCenter().toString() + 
                                         '&z=' + map.getZoom() + 
                                         '&mt=' + map.getType().getLayers().toString() ;
            }
 
            var hash = document.location.hash;
            if (hash) { // Если строка параметров определена
                var hash = hash.substr(1, hash.length - 1).split('&'), // Отрезаем первый символ "#" и 
                                                                       // разбиваем строку на подстроки параметр=значение
                    params = {}; // Объект будущих параметров
 
                for (var i = 0, l = hash.length, param; i < l; i++) {
                    param = hash[i].split('='); // Разбиваем параметр на имя и значение
                    if (param[0] && param[1]) {
                        params[param[0]] = param[1];
                    }
                }
 
                // Если в урле заданы необходимые параметры
                if (params.ll && params.z && params.mt && params.p) {
                    // Определяем тип карты
                    var mapType = YMaps.MapType.MAP;
                    switch (params.mt) {
 
			case 'map':
                            mapType = YMaps.MapType.MAP;
                            break;
 
                        case 'sat':
                            mapType = YMaps.MapType.SATELLITE;
                            break;
 
                        case 'hyb':
                            mapType = YMaps.MapType.HYBRID;
                            break;
                    }
                  // Центрируем карту в нужном месте
                    map.setCenter(YMaps.GeoPoint.fromString(params.ll), params.z, mapType);
 
 
                }
            }
 
            // Скрипт загружен, все параметры из URL'a применены
            flagLoad = 1;
        }
    </script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px;height:600px"></div> 
</body> 
 
</html>

Здесь используется функция для динамического формирования URL – setUrlParams.

Затем мы производим разбор и определение параметров из строки URL.

После этого центрируем карту в нужном месте.

Еще у нас в скрипте используется специальный флаг flagLoad, который служит признаком выполнения скрипта разбора параметров.

Остается самое простое, сформировать html-страницу со ссылками на конкретные метки на карте.

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

Щелкнув по ссылке одного из адресов, откроется окно с картой центрированной в нужной точке.

Для заметки был использован код из примера по адресу http://rodlex.narod.ru/examples/center-map-from-get-params.html

  • Гость: Спасибо за пример, очень пригодилось. Да и вообще весь ваш блог очень мне помог в проекте, так бы я не смог сам сделать ничего!
  • Гость: Интересно, спасибо! Только, объясните где задается заголовок для динамического формирание урл, здесь указано ymap-elexnet.html....., а в вашем рабочем примере это ymap_pr_35_2.html.....
  • Гость: Файлы elexnet.html и ymap_pr_35_2.html это один и тотже файл, только назван по другому. Это не важно. Важен набор параметров после символа #.
  • Гость: Здравствуйте! Большое спасибо за ваш сайт очень помог в изучении занимательной картографии :)! До этого вроде бы все получалось но именно этот пример у меня и не получается! :( В начале я сделал свою собственную карту и прикрутил к ней возможности данной статьи но но при вводе ссылок карта не центрируется на заданных координатах и не соответствует масштабу введенному в параметрах ссылки. Вот ссылка на страницу с моим вариантом: _http://lisichansk.com.ua/y/map_xml.php Буду очень благодарен за помощь!
  • Гость: Спасибо за пост. А можно ли сделать так, чтобы при этом еще и раскрывался балун того объекта, на которой вела ссылка? Можно иметь идентификатор объекта в ссылке или определять объект по переданным координатам, как проще.
  • Гость: Все, сделал раскрытие балуна. Указываю его номер параметром в ссылке.
  • Гость: Павел а ты не мог бы поделиться примером? Буду благодарен... а то не в правилах автора блога отвечать на коменты :)
  • Гость: Спасибо Вам молодой человек, полезную вещь делаете. На официальном сайте все описано сухо, да и не понятно. А у Вас многое понял. Еще раз благодарю
  • Гость: Спасибо за Вашу работу! А можно сделать так, чтобы на карте отображалась группа меток выводимая из YMapsML. Что-то вроде вашего поста о группе меток, только сделать ссылку на карту где сразу отображаются, допустим, вокзалы?! Буду очень благодарен за помощь!
  • Гость: Автор убрал некоторые вещи из оригинального примера (ссылка в посте имеется). В частности, позиционирование по ссылке как раз и не работало. Виною тому пропущенная конструкция +'&amp;p=' + placemark.getGeoPoint().toString();
  • Гость: Может подскажет кто, как этот самый файл то в формате YmapsML автоматически генерировать? А то, допустим, 100 объектов руками вписывать можно устать.
  • Гость: Очень уж интересная статья. Действительно занимательная. Сейчас вышел ymap api 2.0 Хотелось бы для него вариант. Спасибо за просвящение.
  • Гость: Всем привет. У меня база прорабов на сайте и у каждого прораба есть выполненные объекты. Задался идеей используя только адрес вида: Москва, ул.Герцена д.150, который хранится в переменной $adress, создать ссылку со своего сайта на сайт Я.Карты, щёлкнув по которой открывалась бы страница на Яндексе и меткой указывающей на этот адрес. Быстрый переход, чтобы посмотреть местоположение на карте. Поискав, нашел только большие количества кода, которые уж никак не хочется засовывать в код и вообще разбираться в ней. А что если подставить в ссылку нужный адрес в адрес яндекса вида: https://maps.yandex.ru/?text=АДРЕС ИЗ БАЗЫ - ничего не получается, но стоило перевести русскоязычные буквы в латинские из базы через $adress = str_replace($rus, $lat, $adress); - тобишь: Москва в Moskva и все получилось! Ссылка получается такой: <a href="https://maps.yandex.ru/?text='$adress'">Показать на карте</a> Вот так легко и просто :)
  • Гость: Здравствуйте. А как можно сделать что бы нажав на карте на метку - перейти на отдельную страницу своего же сайта (к примеру у меня на карте много компаний и нажав на метки компании -перейти на отдельную страницу этой компании). ???