API Yandex Map 2.0 несколько карт на одной странице?

Question

[Alexandr Kazakov]

Стоит задача интегрировать в движок яндекс карту с метками для каждого товара.


На API 1.x подключение нескольких карт на одной странице реализуется просто.

<script type="text/javascript">
							YMaps.jQuery(function () {
								
								var map@productUid@ = new YMaps.Map(YMaps.jQuery("#ymaps-@productUid@")[0]);
								map@productUid@.setCenter(new YMaps.GeoPoint(37.678514, 55.758255), 17);
							});

						</script>

    <div id="ymaps-@productUid@" style="width:500px;height:500px"></div>

Как подключить несколько карт на одной странице API 2.0 я так и не понял.

Выводится карта не у каждого товара, а только в первом, и показываются сразу несколько карт.

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [56.136, 40.390],
            zoom: 10
        });

В JS у меня поверхностные знания. Хабровчане, помогите пожалуйста.

Собственно вопрос:

Как поставить метку в первом примере? (сам так и не понял)

Или как реализовать второй пример?

Заранее спасибо

Answer 1

[Роман Макаров]

Боюсь показаться тупым, но не совсем понял вопрос — где первый пример, а где второй?
Ну собственно говоря, множественные карты и метки для них реализовать можно так(пример невозбранно взят из песочницы карты, кстати, советую туда сходить за подробностями работы с апи):

ymaps.ready(init);

function init() {
    var center = [56.136, 40.390];
    var myMap1 = new ymaps.Map('map1', {
        center: center,
        zoom: 10
    });
    var myMap2 = new ymaps.Map('map2', {
        center: center,
        zoom: 10
    });
    var myPlacemark1 = new ymaps.Placemark(center, {
        // Свойства.
        // Содержимое иконки, балуна и хинта.
        iconContent: '1',
        balloonContent: 'Балун',
        hintContent: 'Стандартный значок метки'
    }, {
        // Опции.
        // Стандартная фиолетовая иконка.
        preset: 'twirl#violetIcon'
    });
    var myPlacemark2 = new ymaps.Placemark(center, {
        // Свойства.
        // Содержимое иконки, балуна и хинта.
        iconContent: '2',
        balloonContent: 'Балун',
        hintContent: 'Стандартный значок метки'
    }, {
        // Опции.
        // Стандартная фиолетовая иконка.
        preset: 'twirl#violetIcon'
    });
    myMap1.geoObjects.add(myPlacemark1);
    myMap2.geoObjects.add(myPlacemark2);
}

пример на jsfiddle:
upd: Код, как вы поняли, для второй версии апи.

Comments

[Alexandr Kazakov]

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

т.е.

<div class="tovar">
    <div class="tov_name"...........................

                                  <div class="on_map"><script> Тут настройки отображения карты и метка</script><div id="map_UID">Тут div в котором отображается сама карта</div></div>
                                 ...................................

</div>

<div class="tovar">
    <div class="tov_name"...........................

                                  <div class="on_map"><script> Тут настройки отображения карты и метка</script><div id="map_UID">Тут div в котором отображается сама карта</div></div>
                                 ...................................

</div>

[Роман Макаров]

Насколько я знаю, апи грузится асинхронно, поэтому в любом случае нужно инициализацию добавлять в обработчики ymaps.ready().
Тут я вижу 2 пути:
— где-то в коде вставить генератор js-кода, который повторно будет прогонять все переменные и генерировать js, как в примере, что я оставил
— либо как Вы указали, можно добавлять в ваши теги script код для обработчика загрузки карты:

ymaps.ready(function(){
var center = [56.136, 40.390];
    var myMap = new ymaps.Map('mapUID', {
        center: center,
        zoom: 10
    });
var myPlacemark = new ymaps.Placemark(center, {
        // Свойства.
        // Содержимое иконки, балуна и хинта.
        iconContent: '1',
        balloonContent: 'Балун',
        hintContent: 'Стандартный значок метки'
    }, {
        // Опции.
        // Стандартная фиолетовая иконка.
        preset: 'twirl#violetIcon'
    });
myMap.geoObjectsAdd(myPlacemark);

[Alexandr Kazakov]

Спасибо