Информация о точках выводится рядом с картой. Нужно просто что бы при клике на точки по карте, выводил эти точки рядом с картой в блоке, а не на самой карте в всплывающем окне. Карта вот:
ymaps.ready(init);
function init() {
// Создаем карту.
var myMap = new ymaps.Map("map", {
center: ['{{ query.lat }}', '{{ query.lon }}'],
zoom: 6,
}, {
searchControlProvider: 'yandex#search'
});
// Создаем круг.
var circle, placemark;
placemark = new ymaps.Placemark(['{{ query.lat }}', '{{ query.lon }}'], {
//iconContent: '<?php print $center; ?>',
}, {
preset: 'islands#redStretchyIcon',
draggable: false
});
myMap.geoObjects.add(placemark);
// 20 км погрешность радиуса.
circle = new ymaps.Circle([placemark.geometry.getCoordinates(), {{ distance + 20 * 1000 }}], {}, {
geodesic: true
});
placemark.events.add('drag', function(e) {
return circle.geometry.setCoordinates(placemark.geometry.getCoordinates());
});
myMap.geoObjects.add(circle);
clusterer = new ymaps.Clusterer({
preset: 'islands#invertedVioletClusterIcons',
groupByCoordinates: false,
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false,
}),
getPointData = function(phone, fio) {
return {
// balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
balloonContentBody: '<p><a href="tel:+' + phone + '"><font color = "blue">+<strong>' + phone + '</strong></font></a><a href="' + phone + '" target="_blank"><font color = "blue"></font></a></p>',
// balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + fio + '</strong>',
};
},
getPointOptions = function() {
return {
preset: 'islands#violetIcon'
};
},
points = [
{% if countRes > 0 %}
{% for driver in res %} ['{{ driver.lat }}', '{{ driver.lon }}'],
{% endfor %}
{% endif %}
],
geoObjects = [];
{% if countRes > 0 %}
{% for key,driver in res %}
geoObjects[{{ key }}] = new ymaps.Placemark(points[{{ key }}], getPointData(
'{{ driver.phone_number }}', '{{ driver.fio }}'
), getPointOptions());
{% endfor %}
{% endif %}
clusterer.options.set({
gridSize: 80,
clusterDisableClickZoom: true,
clusterBalloonContentLayoutHeight: 1500,
});
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
var myMapMob = new ymaps.Map("mapMob", {
center: ['{{ query.lat }}', '{{ query.lon }}'],
zoom: 6,
controls: []
}, {
searchControlProvider: 'yandex#search'
});
// ползунок масштаба
myMapMob.controls.add('zoomControl', {
size: 'small',
});
// элемент управления «полноэкранным режимом»
myMapMob.controls.add('fullscreenControl');
// элемент управления "геолокация"
myMapMob.controls.add('geolocationControl');
// Создаем круг.
var circleMob, placemarkMob;
placemarkMob = new ymaps.Placemark(['{{ query.lat }}', '{{ query.lon }}'], {
//iconContent: '<?php print $center; ?>',
}, {
preset: 'islands#redStretchyIcon',
draggable: false
});
myMapMob.geoObjects.add(placemarkMob);
// 20 км погрешность радиуса.
circleMob = new ymaps.Circle([placemark.geometry.getCoordinates(), {{ distance + 20 * 1000 }}], {}, {
geodesic: true
});
placemarkMob.events.add('drag', function(e) {
return circle.geometry.setCoordinates(placemark.geometry.getCoordinates());
});
myMapMob.geoObjects.add(circleMob);
/**
* Создадим кластеризатор, вызвав функцию-конструктор.
* Список всех опций доступен в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
*/
clustererMob = new ymaps.Clusterer({
/**
* Через кластеризатор можно указать только стили кластеров,
* стили для меток нужно назначать каждой метке отдельно.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
*/
preset: 'islands#invertedVioletClusterIcons',
/**
* Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
*/
groupByCoordinates: false,
/**
* Опции кластеров указываем в кластеризаторе с префиксом "cluster".
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
*/
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
}),
/**
* Функция возвращает объект, содержащий данные метки.
* Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
* Поле balloonContentBody - источник данных для контента балуна.
* Оба поля поддерживают HTML-разметку.
* Список полей данных, которые используют стандартные макеты содержимого иконки метки
* и балуна геообъектов, можно посмотреть в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointData = function(phone, fio) {
return {
// balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
balloonContentBody: '<a href="tel:+' + phone + '"><font color = "blue">+<strong>' + phone + '</strong></font></a><a href="' + phone + '" target="_blank"><font color = "blue"></button></font></a><a class="line__button line__button-map card-hvr__button-map card-hvr__button-map_phone" href="tel:' + phone + '"></a><a class="line__button line__button-map card-hvr__button-map card-hvr__button-map_wapp" href="' + phone + '"></a>',
// balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
clusterCaption: '<font color = "black"><strong>' + fio + '</strong></font> ',
};
},
/**
* Функция возвращает объект, содержащий опции метки.
* Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointOptions = function() {
return {
preset: 'islands#violetIcon'
};
},
points = [
{% if countRes > 0 %}
{% for driver in res %} ['{{ driver.lat }}', '{{ driver.lon }}'],
{% endfor %}
{% endif %}
],
geoObjects = [];
{% if countRes > 0 %}
{% for key,driver in res %}
geoObjects[{{ key }}] = new ymaps.Placemark(points[{{ key }}], getPointData(
'{{ driver.phone_number }}', '{{ driver.fio }}'
), getPointOptions());
{% endfor %}
{% endif %}
clustererMob.options.set({
gridSize: 80,
clusterDisableClickZoom: true
});
clustererMob.add(geoObjects);
myMapMob.geoObjects.add(clustererMob);
}