JavaScript: Yandex Maps

Подключение Яндекс.Карты осуществляется асинхронно. Первое, что нам стоит сделать - добавить в config.js путь к библиотеке:

require.config({
	paths: {		
		'ymaps': '//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU'
	},

В ключ shim конфига добавим экспорт:

'ymaps': {
	exports: 'ymaps'
}

Теперь мы можем в любой момент загрузить их с помощью require, используя в качестве идентификатора библиотеки строку ymaps.

Положим, мы хотим, чтобы карты отображались в контейнере с идентификатором map. Добавим следующий код в app.js:

(function(cont) {
	if (!cont.length) return;

	require(['ymaps'], function(ymaps) {
		ymaps.ready(initMap);

		function initMap() {
			var myMap = new ymaps.Map(cont.attr('id'), {
				center: [60.153151, 30.286574],
				zoom: 13
			});
		}
	});
})($('#map'));

Если такой контейнер существует, загружаем библиотеку Яндекс.Карты и сразу после ее загрузки вешаем на событие ready самих карт отрисовку с нашими параметрами. Используем cont.attr('id'), чтобы не дублировать идентификатор map при поиске контейнера и инициализации новой карты.

Для того, чтобы карта адаптивно пережималась мы можем использовать трюк, как с фоторамой, обернув карту в .embed-container wrapper и навесив класс .element на сам контейнер карты:

<div class="embed-container ratio-16-9">
	<div id="map" class="element"></div>
</div>