Метка карты яндекс

by AJIEKCEU

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>
<script>
					var myMap,ymaps;
			// Инициализировать карту
			function init() {
				var winWidth = $(window).width();
				myMap = document.getElementById("map");
				if (!myMap) return;
				myMap = new ymaps.Map(myMap, {
					center: [53.902496, 27.561481],
					zoom: 11, 
					controls: []
				});

				myMap.controls.add("zoomControl", {});
				//myMap.behaviors.disable('scrollZoom');
				if(winWidth <= 1024){
					myMap.behaviors.disable('drag');
				}
				

				var data = {
					'points': [{
						"infoPoint": '<div class="point{% if properties.active %} point_active{% endif %}">\
							<div class="point__temp-wrp">\
								<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
								<div class="point__temp_road">\
									<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
									10.6 С <sup>o</sup>\
								</div>\
								<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
							</div>\
						</div>',
						"latitude": 53.907472,
						"longitude": 27.435321,
					},
					{
						"infoPoint": '<div class="point{% if properties.active %} point_active{% endif %}">\
							<div class="point__temp-wrp point__temp-wrp_red">\
								<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
								<div class="point__temp_road">\
									<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
									10.6 С <sup>o</sup>\
								</div>\
								<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
							</div>\
						</div>',
						"latitude": 53.919324,
						"longitude": 27.527866,
					}],
				};

				var...

CSS

#map {
 position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.point {
  position: absolute;
  z-index: 123;
  width: 12px;
  height: 12px;
  top: -6px;
  left: -6px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #12ac0f;
}

.point_active {
  transform: scale(1.5);
}

.point__temp-wrp {
  position: absolute;
  min-width: 150px;
  height: 20px;
  left: 24px;
  top: 50%;
  margin-top: -10px;
  color: #fff;
  font-size: 12px;
  background-color: #97d830;
  line-height: 12px;
}

.status-weather {
  background-color: #76ab22;
}

.point__temp-wrp_red {
  background-color: #b2152f;
}

.point__temp-wrp_red .point__temp:before {
  border-right-color: #901328;
}

.point__temp-wrp_red .status-weather {
  background-color: #901328;
}

.point__temp {
  float: left;
  position: relative;
  padding-left: 30px;
  padding-right: 7px;
  height: 20px;
}

.point__temp:before {
  content: '';
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -10px;
  border-right: 10px solid #76ab22;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.point__temp .status-weather {
  width: 25px;
  background-size: 15px;
}

.point__temp_road {
  float: left;
  position: relative;
  padding-left: 12px;
  height: 20px;
}

.point__temp_road .icon {
  width: 10px;
  height: 12px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
}

.point-photo {
  position: absolute;
  left: 100%;
  width: 20px;
  height: 20px;
  float: left;
  background-color: #fff;
}

.point-photo .icon {
  width: 12px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -6px;
}