Используем Народную карту на своем сайте

Автор: | 19.12.2010

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

В этой заметке я покажу, как можно разместить Народную карту на Вашем сайте с использованием API Яндекс.Карт.

Для использования Народной карты в API Яндекс.Карт существует специальный модуль и в начале необходимо подключить его.

В строке загрузки API сразу после ключа для Вашего сайта нужно добавить параметр modules=pmap через символ &.

Например:

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==&modules=pmap" type="text/javascript"></script>

Если Вы используете на своем сайте другие модули, то для подключения дополнительного модуля нужно через символ через тильду (~) добавит модуль pmap.

Например:

<script src="http://api-maps.yandex.ru/1.1/?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==modules=hotspot~pmap" type="text/javascript"></script>

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

Для отображения Народной карты существует два типа НК-схема (YMaps.MapType.PMAP) и НК-гибрид (Ymaps.MapType.PHYBRID).

Пример размещения Народной карты с возможностью переключения типа карты:

Пример в действиии

<!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==&modules=pmap" type="text/javascript"></script> 
 
	<script type="text/javascript"> 
		function init () {
			var map = new YMaps.Map( document.getElementById("YMap") );
			map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
			map.setCenter(new YMaps.GeoPoint(44.00189,56.324461), 14, YMaps.MapType.PMAP);
		};
	</script> 
</head> 
 
<body onload="init();"> 
	<div id="YMap" style="height:600px; width:800px;"></div> 
</body> 
 
</html>

Можно добавить и тип обычной карты

Пример в действии

Теперь покажу как организовать поиск по Народной карте

Для поиска можно использовать элемент управления Поиск по карте YMaps.SearchControl.

У него прописывается специальное свойство geocodeProvider: "yandex#pmap"

<!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==&modules=pmap" type="text/javascript"></script> 
 
	<script type="text/javascript"> 
		function init () {
			var map = new YMaps.Map( document.getElementById("YMap") );
			map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
			map.setCenter(new YMaps.GeoPoint(44.00189,56.324461), 12, YMaps.MapType.PMAP);
 
			map.addControl(new YMaps.SearchControl({geocodeOptions: {geocodeProvider: "yandex#pmap"}}));
		};
	</script> 
</head> 
 
<body onload="init();"> 
	<div id="YMap" style="height:400px; width:600px;"></div> 
</body> 
 
</html>

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

Например, наберем в строке поиска Лобачевский Plaza, увидим результат поиска.

Для поиска по Народной карте используется класс Ymaps.Geocoder.

Процедура полностью аналогична сервесу геокодирования, но отличие заключается в том, что происходит обращение к другому поисковому сервису — yandex#pmap (а не yandex#map, который используется по умолчанию). Результаты поиска возвращаются в виде набора меток класса YMaps.PMap.SearchResult.

Пример использования

<!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==&modules=pmap" type="text/javascript"></script> 
 
	<script type="text/javascript"> 
		function init () {
			var map = new YMaps.Map( document.getElementById("YMap") );
			map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
			map.setCenter(new YMaps.GeoPoint(44.00189,56.324461), 16, YMaps.MapType.PMAP);
 
			map.addControl(new YMaps.SmallZoom());
 
			var geocoder = new YMaps.Geocoder("КЗ Юпитер", {geocodeProvider:"yandex#pmap"});
			map.addOverlay(geocoder);
 
			YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
				if (this.length()) {
					map.addOverlay(this.get(0));
					map.panTo(this.get(0).getGeoPoint())					
				}
				else {
					alert("Ничего не найдено");
				}
			});
 
			YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (error) {
				alert("Произошла ошибка: " + error.message)
			});
		};
	</script> 
</head> 
 
<body onload="init();"> 
	<div id="YMap" style="height:400px; width:600px;"></div> 
</body> 
 
</html>

И еще пример, множественное геокодирование на Народной карте.

За основу взят пример из документации по адресу http://api.yandex.ru/maps/jsapi/examples/multiplygeocoding.html

Пример в действии

В исходном примере произведены следующие изменения:

  • добавлено подключение модуля Народной карты в строку загрузки API;
  • определение центра карты:
  • изменена строка с адресами геогравических объектов;

Было:

// Координаты или адреса географических объектов
var data = ["Москва", "Санкт-Петербург", "Екатеринбург", "Киев", "Одесса", "Сиферополь"];

Стало:

// Координаты или адреса географических объектов

var data = ["Нижний Новгород, Лобачевский Plaza", "Нижний Новгород, Клуб Матрица", "Нижний Новгород, школа №18", "Нижний Новгород, Нагорный дворец спорта"];

  • изменена строка в функции geocode, вызова геокодера для одного объекта

Было:

var geocoder = new YMaps.Geocoder(request);

Стало:

var geocoder = new YMaps.Geocoder(request, {geocodeProvider:"yandex#pmap"});

Подробнее о поиске по Народной карте можно прочитать по адресу http://api.yandex.ru/maps/geocoder/doc/psearch/concepts/About.xml

Используем Народную карту на своем сайте: 5 комментариев

  1. Игорек

    а как ограничить поиск ?
    что бы искал не по всей России )) а по определенному месту? на народных картах???

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

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