Add Yandex.Maps to the site

Add Yandex.Maps to the site

Introduction

Yandex cards are the most used cards in our country, and it is not surprising. Many sites use them at home, because it is convenient and works. Yandex maps have a good API, although in some places I would like to see it improved 🙂 Nevertheless, it is possible to work and it is very convenient. Go!

What do you need to work?

To work with maps, we need to create a div with id = “map” on the site. This is basic markup. This block will need to be sized to display the map correctly. Then we connect Yandex API in scripts.

After connecting the API, all its functions are available to us. At the moment, we have connected version 2.1, but you can work with 2.0 as well.

Map creation

ymaps.ready(init);
var myMap;

function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
}

This is also basic markup, where “map” is the id of our container. the numbers in the center variable are the definition of the center of the map. You can always find the center you need in a special Geocoder. Zoom is the value at which our map will initially be “zoomed”. This value can also be viewed in the geocoder.

Complicating the task

Now you know how to create a simple map, but how to make a marker on it? Quite simple.

In addition to the tag itself, I added a couple more changes, which I will also talk about. First, at the very top, we add a variable for the marker – myPlacemark. It is with this variable that we will work.

ymaps.ready(init);
let myMap,
myPlacemark;

function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7,
controls: ['zoomControl']
});
myMap.behaviors.disable('scrollZoom');
myPlacemark = new ymaps.Placemark([57.01115476272839,40.974302929774815], {
hintContent: 'Собственный значок метки',
balloonContent: 'Это красивая метка'
}, {
iconLayout: 'default#image',
iconImageHref: 'img/map-marker.png',
iconImageSize: [54, 60],
iconImageOffset: [-13, -53]
});

myMap.geoObjects.add(myPlacemark);
}

As you may have noticed, we have added another line controls: ['zoomControl']… This line adds (if not) a scroll bar to the map for zooming the map. Very comfortably. myMap.behaviors.disable('scrollZoom');– disable zooming of the map when scrolling with the mouse. A very important function, because many get rid of the zoom when scrolling with the mouse.

Finally, we come to the very mark. The square brackets contain the same coordinates of the placemark, which can also be found in the geocoder. Conveniently.

Variable hintContent is responsible for the text that will be shown when hovering over the marker. Variable balloonContent – text that will be shown on click. You can also make an image there, if you only want)

Next – an important part of the marker – its appearance. Personally, I do not recognize the marker views built into the API, so I will skip this right away. Let’s go through the variables: iconLayout – sets the picture as a marker iconImageHref – defines the path to your custom image iconImageSize – determines the size of the marker iconImageOffset – marker offset from the center.

And the last thing myMap.geoObjects.add(myPlacemark); – adding the myPlacemark geo object to the map myMap

Conclusion

The Yandex.Maps theme is far from complete. We will discuss them in the following articles!

Leave a Reply

Your email address will not be published. Required fields are marked *