};
const icons = {
school: '/assets/img/mp/white/education.svg',
'bus stop': '/assets/img/mp/white/172577_bus_icon2.svg',
restaurant: '/assets/img/mp/white/eating_3959463.svg',
'shopping mall': '/assets/img/mp/white/shopping-bag_6145439.svg',
hospital: '/assets/img/mp/white/police-station.svg',
kindergarten: '/assets/img/mp/white/stroller.svg',
pharmacy: '/assets/img/mp/white/medicine_8047451.svg', // Пример иконки аптеки
supermarket: '/assets/img/mp/white/grocery_15173553.svg', // Пример иконки супермаркета
cafe: '/assets/img/mp/white/coffee-cup_1244902.svg', // Пример иконки кафе
park: '/assets/img/mp/white/park_3181859.svg', // Пример иконки парка
bank: '/assets/img/mp/white/shekel_3347552.svg', // Пример иконки банка
default: 'https://maps.google.com/mapfiles/ms/icons/pink.png'
};
const activeFilters = {};
const markerGroups = {};
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
map = new Map(document.getElementById("map"), {
center,
zoom: 15,
mapId: "ee1e7621773394ad92838e82"
});
directionsRenderer = new google.maps.DirectionsRenderer({
map: map,
suppressMarkers: true
});
distanceService = new google.maps.DistanceMatrixService();
// Маркер дома с квадратной формой и изображением
const homeImageUrl = '/assets/images/products/4759/001.jpg'; // Замените на реальный URL изображения дома
const homeMarkerContent = document.createElement('div');
homeMarkerContent.style.cssText = `
background-image: url('${homeImageUrl}');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
width: 80px;
height: 80px;
border-radius: 7px;
border: 6px solid white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
`;
// Добавление треугольника внизу с помощью псевдоэлемента
const triangle = document.createElement('div');
triangle.style.cssText = `
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
`;
homeMarkerContent.appendChild(triangle);
// Проверка загрузки изображения
const img = new Image();
img.src = homeImageUrl;
img.onload = () => {
console.log('Изображение дома загружено успешно:', homeImageUrl);
new AdvancedMarkerElement({
map,
position: center,
title: "ЖК",
content: homeMarkerContent
});
};
img.onerror = () => {
console.error('Ошибка загрузки изображения дома:', homeImageUrl);
homeMarkerContent.style.backgroundImage = 'none';
homeMarkerContent.style.backgroundColor = '#fff';
new AdvancedMarkerElement({
map,
position: center,
title: "ЖК (ошибка изображения)",
content: homeMarkerContent
});
};
document.querySelectorAll('.filter-button').forEach((btn) => {
btn.addEventListener('click', () => {
const type = btn.dataset.type;
const isActive = btn.classList.contains('active');
if (isActive) {
btn.classList.remove('active');
removeMarkers(type);
activeFilters[type] = false;
} else {
btn.classList.add('active');
filterPlaces(type);
activeFilters[type] = true;
}
});
});
}
function removeMarkers(type) {
if (markerGroups[type]) {
markerGroups[type].forEach(marker => marker.map = null);
markerGroups[type] = [];
}
}
function clearAllMarkers() {
for (const type in markerGroups) {
removeMarkers(type);
}
document.querySelectorAll('.filter-button').forEach(btn => {
btn.classList.remove('active');
});
for (const key in activeFilters) delete activeFilters[key];
}
async function filterPlaces(type) {
const { Place } = await google.maps.importLibrary("places");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const request = {
textQuery: type,
fields: ["location", "displayName", "formattedAddress", "rating"],
locationBias: {
center,
radius: 3000
}
};
try {
const { places } = await Place.searchByText(request);
console.log(`Найдено мест для "${type}":`, places);
if (!markerGroups[type]) markerGroups[type] = [];
if (places?.length > 0) {
places.forEach((place) => {
if (place.location) {
const marker = new AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName || type,
content: createMarkerContent(icons[type] || icons.default, type) // Передаём type
});
markerGroups[type].push(marker);
distanceService.getDistanceMatrix({
origins: [center],
destinations: [place.location],
travelMode: google.maps.TravelMode.WALKING,
unitSystem: google.maps.UnitSystem.METRIC
}, (responseWalk, statusWalk) => {
let walkTime = '', walkDistance = '';
if (statusWalk === 'OK') {
const element = responseWalk.rows[0].elements[0];
walkTime = element.duration.text;
walkDistance = element.distance.text;
walkTime = walkTime.replace('mins', 'דקות');
walkDistance = walkDistance.replace('km', 'ק״מ').replace('m', 'מ׳');
}
distanceService.getDistanceMatrix({
origins: [center],
destinations: [place.location],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
}, (responseDrive, statusDrive) => {
let driveTime = '', driveDistance = '';
if (statusDrive === 'OK') {
const element = responseDrive.rows[0].elements[0];
driveTime = element.duration.text;
driveDistance = element.distance.text;
driveTime = driveTime.replace('mins', 'דקות');
driveDistance = driveDistance.replace('km', 'ק״מ').replace('m', 'מ׳');
}
distanceService.getDistanceMatrix({
origins: [center],
destinations: [place.location],
travelMode: google.maps.TravelMode.BICYCLING,
unitSystem: google.maps.UnitSystem.METRIC
}, (responseBike, statusBike) => {
let bikeTime = '', bikeDistance = '';
if (statusBike === 'OK') {
const element = responseBike.rows[0].elements[0];
bikeTime = element.duration.text;
bikeDistance = element.distance.text;
bikeTime = bikeTime.replace('mins', 'דקות');
bikeDistance = bikeDistance.replace('km', 'ק״מ').replace('m', 'מ׳');
}
const service = new google.maps.places.PlacesService(map);
let photoUrl = '';
service.getDetails({
placeId: place.id || place.placeId,
fields: ['photos']
}, (details, statusDetails) => {
if (statusDetails === google.maps.places.PlacesServiceStatus.OK && details.photos?.length > 0) {
photoUrl = details.photos[0].getUrl({ maxWidth: 300 });
}
marker.addListener('click', () => {
if (infoWindow) infoWindow.close();
infoWindow = new google.maps.InfoWindow({
content: createInfoWindowContent(place, walkTime, walkDistance, driveTime, driveDistance, bikeTime, bikeDistance, photoUrl)
});
infoWindow.open({ anchor: marker, map });
infoWindow.addListener('closeclick', () => {
clearRoute();
document.querySelectorAll('.build-route').forEach((routeLink) => {
routeLink.classList.remove('active');
});
});
google.maps.event.addListener(infoWindow, 'domready', () => {
setTimeout(() => {
document.querySelectorAll('.build-route').forEach((routeLink) => {
routeLink.addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll('.build-route').forEach((link) => {
link.classList.remove('active');
});
routeLink.classList.add('active');
const lat = parseFloat(routeLink.dataset.lat);
const lng = parseFloat(routeLink.dataset.lng);
const mode = routeLink.dataset.mode;
buildRoute(center, { lat, lng }, mode);
});
});
}, 0);
});
});
});
});
});
});
}
});
} else {
console.warn(`Места для "${type}" не найдены`);
}
} catch (e) {
console.error(`Ошибка при фильтре "${type}":`, e);
}
}
function createMarkerContent(iconUrl, type) {
const div = document.createElement('div');
const classType = type.replace(/\s+/g, '-').toLowerCase();
const backgroundColors = {
school: '#5D708C', // Синий
'bus-stop': '#444B54', // Серый
restaurant: '#C1A17B', // Коричневатый
'shopping-mall': '#A892A4', // Фиолетовый
hospital: '#A45A5A', // Бордовый
kindergarten: '#A8C6DB', // Голубой
pharmacy: '#6BAE9E', // Бирюзовый
supermarket: '#8A9A5B', // Оливковый
cafe: '#D4A373', // Теплый бежевый
park: '#6D8B74', // Зеленоватый
bank: '#8E7A9E', // Лиловый
default: '#ff69b4' // Розовый (для остальных)
};
div.className = `marker-container marker-${classType}`;
div.style.cssText = `
width: 36px;
height: 36px;
background-color: ${backgroundColors[classType] || backgroundColors.default};
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
`;
const img = document.createElement('img');
img.src = iconUrl;
img.style.cssText = `
width: 20px;
height: 20px;
object-fit: contain;
`;
div.appendChild(img);
return div;
}
function createInfoWindowContent(place, walkTime, walkDistance, driveTime, driveDistance, bikeTime, bikeDistance, photoUrl = '') {
const lat = place.location.lat();
const lng = place.location.lng();
return `
${photoUrl ? `
` : ''}
${place.displayName || 'Нет названия'}
${place.formattedAddress || 'Адрес неизвестен'}
${walkTime || ''}
${walkTime ? `${walkDistance}` : ''}
${bikeTime || ''}
${bikeTime ? `${bikeDistance}` : ''}
${driveTime || ''}
${driveTime ? `${driveDistance}` : ''}
`;
}
function buildRoute(origin, destination, mode = 'DRIVING') {
const directionsService = new google.maps.DirectionsService();
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode[mode]
}, (result, status) => {
if (status === 'OK') {
directionsRenderer.setDirections(result);
} else {
console.error('Ошибка построения маршрута:', status);
}
});
}
function clearRoute() {
if (directionsRenderer) {
directionsRenderer.setMap(null);
directionsRenderer = new google.maps.DirectionsRenderer({ map: map, suppressMarkers: true });
directionsRenderer.set('directions', null);
}
}
תפריט
