ferym
@ferym
Web-Developer

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

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


На 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 у меня поверхностные знания. Хабровчане, помогите пожалуйста.

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

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

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

Заранее спасибо
  • Вопрос задан
  • 14654 просмотра
Решения вопроса 1
vollossy
@vollossy
Веб-разработчик с небольшим опытом работы
Боюсь показаться тупым, но не совсем понял вопрос — где первый пример, а где второй?
Ну собственно говоря, множественные карты и метки для них реализовать можно так(пример невозбранно взят из песочницы карты, кстати, советую туда сходить за подробностями работы с апи):
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: Код, как вы поняли, для второй версии апи.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы