M
M
Maxim2017-03-15 14:26:27
css
Maxim, 2017-03-15 14:26:27

How to link elements in the list with their respective marks on yandex maps?

Good day.
Help plz with advice or a solution directly)
In JS, it’s completely green, I can’t solve the task described below.
There is this page .
On the left is a list of clinics. On the right - these same clinics on the map.
I'm trying to do this:
Click on a clinic in the list on the left - and on the map the corresponding clinic changes the color of its icon (the path to the image file changes).
In the list of clinics, each of the clinics has data-attributes where the coordinates of the clinic are written. js picks them up and creates geo objects.
I'll post the js here.

(function ($) {
  $(document).ready(function() {
    var elementMap = document.getElementById('map-results');

    if (elementMap) {
      ymaps.ready(init);
    }

    function init() {
      var myMap = new ymaps.Map(elementMap, {
        center: [59.937204, 30.313636],
        zoom: 13
      });

      var myCollection = new ymaps.GeoObjectCollection(null, {
        iconLayout: 'default#image',
        iconImageHref: 'svg/map_icon.svg',
        iconImageSize: [30, 30],
        iconImageOffset: [0, 0]
      });

      $('.search__result .clinic-item__address').each(function() {
        var lat = $(this).attr('data-lat'),
        long = $(this).attr('data-long'),
        clinic = $(this).parents('.clinic-item');

        var geoObject = new ymaps.GeoObject({
          geometry: {
            type: "Point",
            coordinates: [lat, long]
          }
        });

        geoObject.events.add('click', function (e) {

          myCollection.each(function (geoObject) {
            geoObject.options.set({
              iconImageHref: 'svg/map_icon.svg'
            });
          });

          e.get('target').options.set({
            iconImageHref: 'svg/map_active.svg'
          });




          $('.clinic-item--active').removeClass('clinic-item--active');

          clinic.addClass('clinic-item--active');

          $('.search__result').animate({ scrollTop: $('.clinic-item--active').position().top}, 500);
        });

        myCollection.add(geoObject);
      });

      myMap.geoObjects.add(myCollection);

      myMap.setBounds(myCollection.getBounds(), {
        checkZoomRange : true,
        duration       : 500,
        zoomMargin     : 10
      });

      $('.search').on('click', '.clinic-item', function () {
        var item = $(this);

        if ( !item.hasClass('clinic-item--active') ) {
          var lat = item.find('.clinic-item__address').attr('data-lat'),
          long = item.find('.clinic-item__address').attr('data-long');

          $('.clinic-item--active').removeClass('clinic-item--active');
          item.addClass('clinic-item--active');
        }
      });
    };

    var elementMapClinic = document.getElementById('map');

    if (elementMapClinic) {
      ymaps.ready(initMap);
    }

    function initMap(){
      var lat = $('.clinic .clinic-item__address').attr('data-lat'),
      long = $('.clinic .clinic-item__address').attr('data-long'),
      myMap = new ymaps.Map(elementMapClinic, {
        center: [lat, long],
        zoom: 15
      });

      myPlacemark = new ymaps.Placemark([lat, long], {}, {
        iconLayout: 'default#image',
        iconImageHref: 'svg/map_active.svg',
        iconImageSize: [40, 40],
        iconImageOffset: [0, 0]
      });

      myMap.geoObjects.add(myPlacemark);
    };
  })
} ( jQuery ));

I am reading Yandex maps api now. Just very limited in time. So far, I haven't come up with anything.
Probably, you need to somehow, by clicking on the clinic, look for a geo object with the corresponding coordinates and change the image of the icon for it. I just can't figure out how to do it.
Thank you very much!!!
ps Sorry for the JS sheet. I don't think it makes much sense to put this code in the sandbox :)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
freeExec, 2017-03-16
@Tispartaaaa

When you create markers for the first time according to the list with coordinates, add a link to the instance of the marker itself. Then you don't have to look for it and you can immediately change its properties.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question