/home/bdqbpbxa/demo-subdomains/u-pod.goodface.com.ua/wp-content/themes/upod/assets/js/map.js
// Create shops dropdown
let shopsDropdownItems = '';
mapShops.forEach((shop, index) => {
shopsDropdownItems += `
<li data-brand="${shop.brand}" data-city="${shop.city}" data-marker="marker_${index}">
<p class="shop">${shop.title}</p>
<a href="${shop.addressUrl}" class="address" target="_blank">${shop.address}</a>
</li>
`;
});
document.querySelector('.shops-list__content').innerHTML = shopsDropdownItems;
// Map
var map;
var mapMarkers = {};
var mapWindows = {};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 15,
scrollwheel: false,
clickableIcons: false,
streetViewControl: false,
});
map.setOptions({
styles: mapStyles
});
mapShops.forEach((shop, index) => {
const markerID = 'marker_' + index;
let windowContent = `
<p class="map__name">${shop.title}</p>
<p class="map__description">${shop.description}</p>
<a href="${shop.addressUrl}" class="map__address" target="_blank">${shop.address}</a>`;
mapMarkers[markerID] = new google.maps.Marker({
position: shop.position,
map: map,
icon: mapMarker
});
mapWindows[markerID] = new google.maps.InfoWindow({
content: windowContent
});
mapMarkers[markerID].addListener('click', function () {
openMarker(markerID);
});
});
google.maps.event.addListener(map, 'click', function (event) {
closeMarkers();
});
}
function closeMarkers() {
for (var el in mapWindows) {
mapWindows[el].close();
}
}
function openMarker(marker) {
closeMarkers();
mapWindows[marker].open(map, mapMarkers[marker]);
}
// Choise shop
$('.shops-list__content li').on('click', function () {
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
let marker = $(this).attr('data-marker');
let lat = mapMarkers[marker].position.lat();
let lng = mapMarkers[marker].position.lng();
map.panTo({
lat,
lng
});
openMarker(marker);
});
// Filter markers
$(window).on('shops-filter', function () {
$('.shops-list__content li').each(function () {
closeMarkers();
let isVisible = $(this).is(':visible');
let marker = $(this).attr('data-marker');
mapMarkers[marker].setVisible(isVisible);
});
});
// Map styles
const mapStyles = [
{
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ededed"
}
]
},
{
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#dedede"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#c9c9c9"
}
]
}
];