Изначально на сайте отображалась карта и все работало корректно, однако, было принято решение о том, что лучше сделать кнопку показать/скрыть карту и карту скрыли. После этого карта стала отображаться некорректно, только после кликов и взаимодействия c картой она приходит в изначальный вид. Был добавлен скрипт, который меняет стиль на hidden и обратно. Также изначально, когда карта по умолчанию отображалась, был какой-то прелоадер (1-3 сек) и на карте расставлялись объекты.
Я думаю, потому, что стиль изменен на hidden, прелоадеру не дают загрузиться и при нажатии на "показать карту", происходит некорректное отображение.
Возможно, какие-то другие причины. Каким образом это можно выяснить и решить проблему??
Ссылка на карту: ciwa2049.beget.tech/search-map-properties-page не знаю, возможно поможет php-скрипт, генерирующий данную форму с поиском и картой:
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; ?>
<div class="opalestate-search-properties">
<div class="inner">
<div class="container-2">
<div class="search-properies-form">
<?php OpalEstate_Search::render_horizontal_form(); ?>
</div>
</div>
<div align="center"><a href="javascript:void(0)" onclick="showHide('opalestate-map-preview')">Посмотреть объекты на карте</a></div>
<div id="opalestate-map-preview" style="height: 500px;" data-page="<?php echo $paged; ?>">
<div id="mapView">
<div class="mapPlaceholder"><!-- <span class="fa fa-spin fa-spinner"></span> <?php //esc_html_e( 'Loading map...', 'opalestate' ); ?> -->
<div class="sk-folding-cube" >
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</div>
</div>
</div>
</div>
</div>
js-код КНОПКИ:
/**
* Функция Скрывает/Показывает блок
**/
function showHide(element_id) {
//Если элемент с id-шником element_id существует
if (document.getElementById(element_id)) {
//Записываем ссылку на элемент в переменную obj
var obj = document.getElementById(element_id);
//Если css-свойство display не block, то:
if (obj.style.display != "block") {
obj.style.display = "block"; //Показываем элемент
}
else obj.style.display = "none"; //Скрываем элемент
}
//Если элемент с id-шником element_id не найден, то выводим сообщение
else alert("Элемент с id: " + element_id + " не найден!");
google.maps.event.trigger(map, 'resize');
}
---??ВРОДЕ БЫ КОД ИНИЦИАЛИЗАЦИИ КАРТЫ??---
/**
* GOOGLE MAPS IN SEARCH PROPERTY PAGE
*/
if( $('#opalestate-map-preview').length > 0 ) {
$.ajax({
type: 'GET',
dataType: 'json',
url: opalesateJS.ajaxurl,
data: location.search.substr(1)+"&action=opalestate_ajx_get_properties&paged="+$('#opalestate-map-preview').data('page'),
success: function(data) {
initializePropertiesMap( data );
}
});
}
function initializePropertiesMap( properties ) {
// Properties Array
var mapOptions = {
zoom: 12,
maxZoom: 16,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
}
};
var map = new google.maps.Map( document.getElementById( "opalestate-map-preview" ), mapOptions );
var bounds = new google.maps.LatLngBounds();
// Loop to generate marker and infowindow based on properties array
var markers = new Array();
for ( var i=0; i < properties.length; i++ ) {
// console.log( properties[i] );
var url = properties[i].icon;
var size = new google.maps.Size( 42, 57 );
if( window.devicePixelRatio > 1.5 ) {
if ( properties[i].retinaIcon ) {
url = properties[i].retinaIcon;
size = new google.maps.Size( 83, 113 );
}
}
var image = {
url: url,
size: size,
scaledSize: new google.maps.Size( 30, 51 ),
origin: new google.maps.Point( 0, 0 ),
anchor: new google.maps.Point( 21, 56 )
};
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng( properties[i].lat, properties[i].lng ),
map: map,
icon: image,
title: properties[i].title,
animation: google.maps.Animation.DROP,
visible: true
});
bounds.extend( markers[i].getPosition() );
var boxText = document.createElement( "div" );
var pricelabel = '';
if( properties[i].pricelabel ){
pricelabel = ' / ' + properties[i].pricelabel;
}
// console.log( properties[i] );
boxText.className = 'map-info-preview media';
var meta = '<ul class="list-inline property-meta-list">';
if( properties[i].metas ){
for ( x in properties[i].metas ){
var m = properties[i].metas[x];
meta += '<li><i class="icon-property-'+x+'"></i>' + m.value +'<span class="label-property">' + m.label + '</span></li>'
}
}
meta += '</ul>';
boxText.innerHTML = '<div class="media-left"><a class="thumb-link" href="' + properties[i].url + '">' +
'<img class="prop-thumb" src="' + properties[i].thumb + '" alt="' + properties[i].title + '"/>' +
'</a></div>' +
'<div class="info-container media-body"><span class="property-status">' + properties[i].status +
'</span><h5 class="prop-title"><a class="title-link" href="' + properties[i].url + '">' + properties[i].title +
'</a></h5><p class="prop-address"><em>' + properties[i].address + '</em></p><p><span class="price text-primary">' + properties[i].pricehtml + pricelabel +
'</span></p></div>'+meta+'<div class="arrow-down"></div>';
var myOptions = {
content: boxText,
disableAutoPan: true,
maxWidth: 0,
alignBottom: true,
pixelOffset: new google.maps.Size( -122, -48 ),
zIndex: null,
closeBoxMargin: "0 0 -16px -16px",
closeBoxURL: opalesateJS.mapiconurl+"close.png",
infoBoxClearance: new google.maps.Size( 1, 1 ),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox( myOptions );
attachInfoBoxToMarker( map, markers[i], ib, i );
}
$('body').delegate( '[data-related="map"]', 'click', function(){ ///alert('dd');
var i = $(this).data( 'id' );
$( '[data-related="map"]' ).removeClass( 'map-active' );
$(this).addClass( 'active' );
map.setZoom( 65536 );// alert( scale );
if( markers[i] ){
var marker = markers[i];
google.maps.event.trigger( markers[i], 'click' );
var scale = Math.pow( 2, map.getZoom() );
var offsety = ( (100/scale) || 0 );
var projection = map.getProjection();
var markerPosition = marker.getPosition();
var markerScreenPosition = projection.fromLatLngToPoint( markerPosition );
var pointHalfScreenAbove = new google.maps.Point( markerScreenPosition.x, markerScreenPosition.y - offsety );
var aboveMarkerLatLng = projection.fromPointToLatLng( pointHalfScreenAbove );
map.setZoom( scale );
map.setCenter( aboveMarkerLatLng );
}
} )
map.fitBounds(bounds);
/* Marker Clusters */
var markerClustererOptions = {
ignoreHidden: true,
maxZoom: 14,
styles: [{
textColor: '#000000',
url: opalesateJS.mapiconurl+"cluster-icon.png",
height: 51,
width: 30
}]
};
var markerClusterer = new MarkerClusterer( map, markers, markerClustererOptions );
var last = null ;
function attachInfoBoxToMarker( map, marker, infoBox , i ){
google.maps.event.addListener( marker, 'click', function(){
if( $( '[data-related="map"]' ).filter('[data-id="'+i+'"]').length > 0 ){
var $m = $( '[data-related="map"]' ).filter('[data-id="'+i+'"]');
$( '[data-related="map"]' ).removeClass( 'map-active' );
$m.addClass('map-active');
$('html, body').animate({
scrollTop: parseInt( $m.offset().top-$m.height()/2 )
}, 1000);
}
if( last != null ){
last.close();
}
var scale = Math.pow( 2, map.getZoom() );
var offsety = ( (100/scale) || 0 );
var projection = map.getProjection();
var markerPosition = marker.getPosition();
var markerScreenPosition = projection.fromLatLngToPoint( markerPosition );
var pointHalfScreenAbove = new google.maps.Point( markerScreenPosition.x, markerScreenPosition.y - offsety );
var aboveMarkerLatLng = projection.fromPointToLatLng( pointHalfScreenAbove );
map.setCenter( aboveMarkerLatLng );
infoBox.open( map, marker );
last = infoBox;
});
}
}
jQuery(".box-info").fitVids();
///
$("#property-filter-status .status-item").click( function(){
$('#property-filter-status input').val( $(this).data('id') );
$('#property-filter-status form').submit();
} );
/* end */
---??Конец??---