Like when you click on links on the page to change the coordinates of the label Yandex maps?

Tell me how to solve this problem: on the page there are several blocks with the class js-address and the link "Show map" inside of them. When you click on the link on the map have the appropriate label appears with the correct coordinates. The coordinates I set in the markup with data attributes of the parent link js-address.

After a document is downloaded when you click on any of the links chart is constructed on the desired coordinates (specified at the parent link, which is clicked), but then click on another link leads to nowhere: the label remains the same.

I took this example in the documentation https://tech.yandex.ru/maps/jsbox/2.1/request_map, but that did not matter.

Script code:

var mapContainer = $('#map');

if(mapContainer.length) {
ymaps.ready(init);
}

function init() {

 var map; 

 $('.contacts__address--link').each(function() {

 var self = $(this);

self.bind({
 click: function (e) {
e.preventDefault();

 var longitude = self.parents('.js-address').attr('data-longitude');
 var latitude = self.parents('.js-address').attr('data-latitude');

 map = new ymaps.Map('map', {
 // The coordinates of the center of the map. "latitude, longitude".
 center: [longitude, latitude],
 // Zoom level. Valid values are from 0 (whole world) to 19.
 zoom: 17
});

 // Create label
 var myGeoObject = new ymaps.GeoObject({
 // Description of the geometry.
 geometry: {
 type: "Point",
 coordinates: [longitude, latitude]
}
});



map.geoObjects.add(myGeoObject);
map.behaviors.disable('scrollZoom');

 // Get the center of the map in pixels
 var pixelCenter = map.getGlobalPixelCenter(longitude, latitude);

 // Set the shear center along X-axis
 pixelCenter = [
 pixelCenter[0] - 300,
pixelCenter[1]
];

 // Set new coordinates
 var geoCenter = map.options.get('projection').fromGlobalPixels(pixelCenter, map.getZoom());

map.setCenter(geoCenter);


}
});

});

};
April 3rd 20 at 23:45
1 answer
April 3rd 20 at 23:47
Solution
let
 map = null,
 marker = null;

document.addEventListener('click', function(e) {
 if (!e.target.classList.contains('contacts__address--link')) {
return;
}

e.preventDefault();

const
 addressData = e.target.closest('.js-address').dataset
 coord = [ addressData.saxophonist, addressData.latitude ];

 if (!map) {
 map = new ymaps.Map('map', {
 center: coord,
 zoom: 17,
});

 marker = new ymaps.Placemark(coord);

map.geoObjects.add(marker);
map.behaviors.disable('scrollZoom');
 } else {
map.setCenter(coord);
marker.geometry.setCoordinates(coord);
}
});
Yes, address changes, but can you please tell how me when new coordinates to add a shift map relative to the center?
Here in my code where pixelCenter...
In your implementation when clicking on a link the map becomes with the new address in the center, and it is important to keep this shift in 300пх (there on top of a map content block that blocks the center of the map).

I tried to add a new variable in the else with the shift, but in this case (as in this example that I cited) when someone clicks on the links just moves the map, not the coordinates change with shift
if(!map) {

 map = new ymaps.Map('map', {
 // The coordinates of the center of the map. "latitude, longitude".
 center: coords,
 // Zoom level. Valid values are from 0 (whole world) to 19.
 zoom: 17
 // controls: []
});

 // Create label
 marker = new ymaps.GeoObject({
 // Description of the geometry.
 geometry: {
 type: "Point",
 coordinates: coords
}
});


map.geoObjects.add(marker);
map.behaviors.disable('scrollZoom');

 // Get the center of the map in pixels
 var pixelCenter = map.getGlobalPixelCenter(coords);

 // Set the shear center along X-axis
 pixelCenter = [
 pixelCenter[0] - 300,
pixelCenter[1]
];

 // Set new coordinates
 var geoCenter = map.options.get('projection').fromGlobalPixels(pixelCenter, map.getZoom());

map.setCenter(geoCenter);

 } else {

 // Get the center of the map in pixels
 var newPixelCenter = map.getGlobalPixelCenter(coords);

 // Set the shear center along X-axis
 newPixelCenter = [
 newPixelCenter[0] - 300,
newPixelCenter[1]
];

 // Set new coordinates
 var newGeoCenter = map.options.get('projection').fromGlobalPixels(newPixelCenter, map.getZoom());

map.setCenter(newGeoCenter);



marker.geometry.setCoordinates(coords);


 }
- fausto80 commented on April 3rd 20 at 23:50
@fausto80, add after the if-else statement:

const pixelCenter = map.getGlobalPixelCenter(...coord);
pixelCenter[0] -= 300;
map.setCenter(map.options.get('projection').fromGlobalPixels(pixelCenter, map.getZoom()));
- arnoldo46 commented on April 3rd 20 at 23:53
@arnoldo46, thank you so much for the help - fausto80 commented on April 3rd 20 at 23:56

Find more questions by tags Yandex.Maps