1

Изначально на сайте отображалась карта и все работало корректно, однако, было принято решение о том, что лучше сделать кнопку показать/скрыть карту и карту скрыли. После этого карта стала отображаться некорректно, только после кликов и взаимодействия 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 */

---??Конец??---

1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – user177221
    Commented 18 мая 2017 в 22:39

1 ответ 1

1

display:none означает что физический размер <div> равен 0, и когда вы меняете на display:block размер изменяется и, соответственно, нужно инициировать обработку события resize. Проблема у вас в том, что переменная карты обявлена локально, и до нее нельзя добраться вне скрипта инициализации.

Переменную с картой надо объявить глобально, например:

scripts.js

window.map = new google.maps.Map( document.getElementById( "opalestate-map-preview" ), mapOptions );

Тогда вы сможете передать ее в event.trigger:

open-close.js

function showHide(element_id) {
    //Если элемент с id-шником element_id существует
    if (document.getElementById(element_id)) { 
          //Записываем ссылку на элемент в переменную obj
          var obj = document.getElementById(element_id); 

          if (obj.style.display != "block") { 
               obj.style.display = "block"; //Показываем элемент
               google.maps.event.trigger(window.map, 'resize') 
          }
          else obj.style.display = "none"; //Скрываем элемент
     }
}  
19
  • Попробовал сделать как вы сказали: вставил google.maps.event.trigger(map, 'resize'); в js-код открытия-закрытия карты или его необходимо вставлять в js-код отображения карты (правда я его не встречал и пока не могу найти(( ???
    – zemil
    Commented 29 мар. 2017 в 8:18
  • мне идея пришла, а можно иммитировать загрузку страницы при нажатии на Посмотреть объекты на карте?? так как изначально после загрузки страницы происходила загрузка данных карты
    – zemil
    Commented 29 мар. 2017 в 8:22
  • @Эмиль это и предлагает Konstantin Okhotnick в комментариях
    – Crantisz
    Commented 29 мар. 2017 в 8:23
  • как я понял он предложил изменить события при которых карта загрузится, мне кажется, что это довольно сложный вариант, который подразумевает правку js-кода карты. Я же предлагаю правку js-кнопки открытия/закрытия карты, он был добавлен позже и отдельно. И будет иммитация события загрузки страницы при нажатии на кнопку, такое возможно в javascript??
    – zemil
    Commented 29 мар. 2017 в 8:26
  • @Эмиль покажите ваш код как вы инициализируете карту
    – Crantisz
    Commented 29 мар. 2017 в 8:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.