Поддерживаемые браузеры

Нормальная работа продукта гарантируется в следующих браузерах:

Internet Explorer v.7 и выше
Opera Browser v.9 и выше
Mozilla Firefox v.3 и выше
Google Chrome — все версии
Apple Safari v.4 и выше

Использование карт на Вашем сайте

Подключение API карт

Для подключения API карт на Ваш сайт, нужно добавить в код страницы тэг SCRIPT с атрибутом "src" равным https://map.meta.ua/js/mapApi.js?lang=код_языка&key=ключ_API. Допустимыми кодами языка являются:

ru - русский
ua - украинский
en - английский

Пример:

...
<script charset="utf-8" type="text/javascript" src="https://map.meta.ua/js/mapApi.js?lang=ru&key=some_api_key"></script>
...

Важная информация для разработчиков: Для упрощения процесса разработки, при работе на локальной машине, не требуется ключ 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" lang="ru" dir="ltr">
	<head>
		<title>MAP</title>
		<style type="text/css">
#map{
	background:none repeat scroll 0 0 #B3C19E;
	cursor:move;
	height:512px;
	position:relative;
	width:1024px;
	z-index:10;
}
		</style>
		<script charset="utf-8" type="text/javascript" src="https://map.meta.ua/js/mapApi.js?lang=ru"></script>
		<script type="text/javascript">
var map = null;
function init() {
	map = new MetaMapsOL.Map('map');
}
		</script>
	</head>
	<body onload="init();">
		<div id="map"></div>
	</body>
</html>

смотреть

Вверх

Базовые элементы управления

Permalink - предназначен для получения постоянной ссылки на позицию карты (координаты, уровень зума)
ScaleLine - рисует линейку масштаба
LayerSwitcher - предназначен для переключения типа карты (карта, спутник) и управления слоями наложения
PanZoomBar - рисует компас и шкалу зума
PanZoom - рисует стрелки перемещения карты и кнопки изменения зума (без шкалы зума)

Элементы управления могут быть добавлены на карту по одному:

...
map.addControl(new Some.Control(options))
...

либо можно добавить массив с одним и более элементов управления:


...
	map.addControls([
		new One.Control(),
		... ,
		new Another.Control(options)
	]);
...

или добавлены в конструкторе карты:


...
	map = new MetaMapsOL.Map('map' {
		controls: [
			new One.Control(),
			... ,
			new Another.Control(options)
		]
	});
...

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

<!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" lang="ru" dir="ltr">
	<head>
		<title>MAP</title>
		<style type="text/css">
#map{
	background:none repeat scroll 0 0 #B3C19E;
	cursor:move;
	height:512px;
	position:relative;
	width:1024px;
	z-index:10;
}
		</style>
		<script charset="utf-8" type="text/javascript" src="https://map.meta.ua/js/mapApi.js?lang=ru"></script>
		<script type="text/javascript">
var map = null;
function init() {
	map = new MetaMapsOL.Map('map', {
		controls: [
			new OpenLayers.Control.Permalink(),
			new MetaMapsOL.Control.LayerSwitcher(),
			new MetaMapsOL.Control.PanZoomBar(),
			new OpenLayers.Control.ScaleLine(),
			new MetaMapsOL.Control.OverviewMap({
				size:     {
					w:180,
					h:120
				}
			})
		]
	});
}
		</script>
	</head>
	<body onload="init();">
		<div id="map"></div>
	</body>
</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" lang="ru" dir="ltr">
	<head>
		<title>MAP</title>
		<style type="text/css">
#map{
	background:none repeat scroll 0 0 #B3C19E;
	cursor:move;
	height:512px;
	position:relative;
	width:1024px;
	z-index:10;
}
		</style>
		<script charset="utf-8" type="text/javascript" src="https://map.meta.ua/js/mapApi.js?lang=ru"></script>
		<script type="text/javascript">
var map = null;
function init() {
	map = new MetaMapsOL.Map('map');

	var markers = new MetaMapsOL.Layer.Markers.Movable();
	map.addLayer(markers);

	var ll = new OpenLayers.LonLat(31.2, 48.5).transform(map.displayProjection, map.projection);
	var size = new OpenLayers.Size(32, 32);
	var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
	var icon = new OpenLayers.Icon("https://map.meta.ua/i/icons/1_04.png", size, offset);
	var marker = new MetaMapsOL.Marker(ll, icon);

	markers.addMarker(marker);
}
		</script>
	</head>
	<body onload="init();">
		<div id="map"></div>
	</body>
</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" lang="ru" dir="ltr">
	<head>
		<title>MAP</title>
		<style type="text/css">
#map{
	background:none repeat scroll 0 0 #B3C19E;
	cursor:move;
	height:512px;
	position:relative;
	width:1024px;
	z-index:10;
}
		</style>
		<script charset="utf-8" type="text/javascript" src="https://map.meta.ua/js/mapApi.js?lang=ru"></script>
		<script type="text/javascript">
// Объявление переменных в глобальной области видимости.
var map = null;
var markers = null;

function init() {
	// Создаём объект геокодера...
	var geoCoder = new MetaMapsOL.geoCoder();
	// ... и запрашиваем координаты по адресу.
	geoCoder.point('Южный парк', function(ll) {
		// Создаём объект карты после ответа геокодера.
		// Это нужно, что бы у карты не "прыгал" зум после ответа геокодера.
		map = new MetaMapsOL.Map('map');
		if (ll) {
			// Если ll не равен false, т.е. адрес найден,
			// преобразуем полученые координаты в проекцию карты.  
			ll = ll.transform(map.displayProjection, map.projection);
			// Устанавливаем центр и зум карты
			map.setCenter(ll, 15);
			// Добавляем слой маркеров.
			markers = new MetaMapsOL.Layer.Markers.Movable();
			map.addLayer(markers);
			// Создаём размер, смещение центра и иконку маркера.
			var size = new OpenLayers.Size(32, 32);
			var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
			var icon = new OpenLayers.Icon("https://map.meta.ua/api/south-park.png", size, offset);
			// Создаём маркер.
			var marker = new MetaMapsOL.Marker(ll, icon);
			// Устанавливаем значения для попапа и добавляем его на карту.
			marker.popupContent = "TEST";
			markers.addMarker(marker);
			marker.createPopup();
			map.addPopup(marker.popup);
		}
	});
}
		</script>
	</head>
	<body onload="init();">
		<div id="map"></div>
	</body>
</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" lang="ru" dir="ltr">
	<head>
		<title>MAP</title>
		<style type="text/css">
#map{
	background:none repeat scroll 0 0 #B3C19E;
	cursor:move;
	height:512px;
	position:relative;
	width:1024px;
	z-index:10;
}
		</style>
		<script charset="utf-8" type="text/javascript" src="https://map.meta.ua/js/mapApi.js?lang=ru"></script>
		<script type="text/javascript">
var map = null;
function init() {
	// Создаём карту и элементы управления.
	map = new MetaMapsOL.Map('map', {
		controls: [
		new OpenLayers.Control.Permalink(),
		// overlaysList - имя списка для слоёв наложения.
		new MetaMapsOL.Control.LayerSwitcher({overlaysList: 'Слои'}),
		new MetaMapsOL.Control.PanZoom(),
		new OpenLayers.Control.ScaleLine(),
		new MetaMapsOL.Control.OverviewMap({
			size:     {
				w:180,
				h:120
			}
		})
		]
	});
	// Добавляем слой маркеров с именем "Маркеры" и позволяем слою отображаться в списке слоёв наложения.
	var markers = new MetaMapsOL.Layer.Markers.Movable("Маркеры", {
		displayInLayerSwitcher: true
	});
	map.addLayer(markers);

	// Создаём объект границ.
	var extent = new OpenLayers.Bounds();
	
	// Создаём размер, смещение центра и иконку маркера.
  var size = new OpenLayers.Size(32, 32);
  var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
  var icon = new OpenLayers.Icon("https://map.meta.ua/i/icons/1_04.png", size, offset);

	for(var i=0; i<10; i++) {
		// Создаём объект LonLat со случайными координатами.
		var ll = new OpenLayers.LonLat(getRandomArbitary(36.12, 36.4), getRandomArbitary(49.9, 50.02)).transform(map.displayProjection, map.projection);
		// Создаём объект Маркера. Использовать один объект icon для нескольких маркеров нельзя.
		// icon будет отрисован только в позиции последнего маркера.
		// Поэтому для каждого маркера создаём свою копию icon.
		var marker = new MetaMapsOL.Marker(ll, icon.clone());
		// Добавляем маркер на карту.
		markers.addMarker(marker);
		
		// Расширяем объект границ до позиции текущего маркера.
		extent.extend(ll);
	}
	// Устанавливаем центр и зум карты.
	map.setCenter(extent.getCenterLonLat(), map.getZoomForExtent(extent));
}

function getRandomArbitary(min, max) {
  return Math.random() * (max - min) + min;
}
		</script>
	</head>
	<body onload="init();">
		<div id="map"></div>
	</body>
</html>

смотреть

Вверх

Известные проблемы

Встречаются в IE всех поддерживаемых версий при использовании VML. См. отчёт об ошибке jQuery #7071

При обращении к атрибуту "type" VML-ноды возникает ошибка "Failed", вне зависимости от того, было это обращение на запись или на чтение.

Пример программного кода, при выполнении которого возникает ошибка:

<html xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<title>VML</title>
		<style type="text/css">
v\:* {behavior:url(#default#VML)}
		</style>
		<script type="text/javascript">
function add() {
	var r = document.getElementById('g1').appendChild(document.createElement("v:rect"));
	r.style.position = "absolute";
	r.style.top = 50;
	r.style.left = 50;
	r.style.width = 100;
	r.style.height = 100;
	r.fillcolor = "#0f0";
}
function getTest() {
	alert(document.getElementById('r1').getAttribute('test'));
}
function throwError() {
	 document.getElementById('r1').type;
}
		</script>
	</head>
	<body>
		<v:group id="g1" style="width:300px;height:300px;">
			<v:rect id="r1" test="Some value" style="width:210px;height:210px;" fillcolor="#f00"></v:rect>
		</v:group>
		<br />
		<input type="button" value="Add" onclick="add()" />
		<input type="button" value="Get Test" onclick="getTest()" />
		<input type="button" value="Throw Error" onclick="throwError()" />
	</body>
</html>

Проблема решается путем модификации библиотеки jQuery следующим образом: все обращения вида:

elem.type

необходимо заменить на:

function(elem) {
	if (elem && jQuery.browser.msie && elem.scopeName && elem.scopeName != 'HTML' && document.namespaces.item(elem.scopeName).urn.toLowerCase() == 'urn:schemas-microsoft-com:vml') {
		return 'vml';
	}
	return elem.type
}

И исправить Sizzle (движок, используемый в jQuery для работы с селекторами) согласно с версией от 3 ноября 2010г.

Во избежание возможных проблем, рекомендуем использовать модифицированную версию библиотеки jQuery, которая находится по адресу: https://map.meta.ua/js/jquery-1.4.2.modified.js

При «полном» обновлении страницы, при котором все данные запрашиваются с сервера и игнорируются закешированные данные (Ctrl+F5 или Ctrl+R) не срабатывают проверки вида
```
	...
	if (!!document.namespaces) {
	...
```
,
```
	...
	if (document.namespaces != null) {
	...
```
Эта ошибка возникает, если в теге HTML не указан хотя бы один namespace.
Чтобы это исправить, нужно дописать к тегу произвольный namespace, например:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:xhtml="http://www.w3.org/1999/xhtml">
	<head>
		<title>Some Title</title>
		...
	</head>
	<body>
		...
	</body>
</html>
					
```

Вверх