JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
JavaScript
ymaps.ready(init);
//Определение начальных параметров карты
function init () {
var myMap = new ymaps.Map("map", {
center: [62.0393, 129.7439],
zoom: 12,
behaviors: ['default', 'scrollZoom', 'drag']
}, {
balloonMaxWidth: 600
});
//Добавляем элементы управления
myMap.controls
.add('zoomControl')
.add('typeSelector')
myMap.behaviors.disable('dblClickZoom');
//Запрос данных и вывод маркеров на карту
$.getJSON("vivodpointsmap.php", function(json){
for (i = 0; i < json.markers.length; i++) {
var lat=json.markers[i].lat;
var lon=json.markers[i].lon;
var myPlacemark = new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon], {
// Свойства
iconContent: json.markers[i].icontext,
roomsContent: json.markers[i].rooms,
hintContent: json.markers[i].hinttext,
balloonContentBody: json.markers[i].imgza, //переменная которую нужно вывести
balloonContentHeader: json.markers[i].balloontext,
balloonContentFooter: json.markers[i].pricez
}, {
// Опции
preset: json.markers[i].styleplacemark
});
myPlacemark.events.add('contextmenu', function (e) {
if (!myMap.balloon.isOpen()) {
var coords = e.get('coordPosition');
myMap.balloon.open(coords, {
contentBody: '<div id="menu">' +
'<button type="submit" class="btn btn-success">Удалить метку</button>' +
'</div>'
});
var myPlacemark = new ymaps.Placemark(coords);
//Сохраняем данные из формы
...