我在我的分类广告网站上创建了一个自定义地图视图页面，我似乎在页面加载方面有问题，下面是页面的代码。
<?php
$featured_query = \'\';
if(!empty($stm_listing_filter[\'featured\'])) {
$featured_query = $stm_listing_filter[\'featured\'];
}
$listing = $stm_listing_filter[\'listing_query\'];
$filter_badges = $stm_listing_filter[\'badges\'];
$filter_links = stm_get_car_filter_links();
$listing_filter_position = get_theme_mod(\'listing_filter_position\', \'left\');
if(!empty($_GET[\'filter_position\']) and $_GET[\'filter_position\'] == \'right\') {
$listing_filter_position = \'right\';
}
$regular_price_label = get_post_meta(get_the_ID(), \'regular_price_label\', true);
$special_price_label = get_post_meta(get_the_ID(),\'special_price_label\',true);
$price = get_post_meta(get_the_id(),\'price\',true);
$sale_price = get_post_meta(get_the_id(),\'sale_price\',true);
$car_price_form_label = get_post_meta(get_the_ID(), \'car_price_form_label\', true);
$data_price = \'0\';
if(!empty($price)) {
$data_price = $price;
}
if(!empty($sale_price)) {
$data_price = $sale_price;
}
if(empty($price) and !empty($sale_price)) {
$price = $sale_price;
}
$mileage = get_post_meta(get_the_id(),\'mileage\',true);
$data_mileage = \'0\';
if(!empty($mileage)) {
$data_mileage = $mileage;
}
$taxonomies = stm_get_taxonomies();
$categories = wp_get_post_terms(get_the_ID(), $taxonomies);
$classes = array();
if(!empty($categories)) {
foreach($categories as $category) {
$classes[] = $category->slug.\'-\'.$category->term_id;
}
}
//Fav
$cars_in_favourite = array();
if(!empty($_COOKIE[\'stm_car_favourites\'])) {
$cars_in_favourite = $_COOKIE[\'stm_car_favourites\'];
$cars_in_favourite = explode(\',\', $cars_in_favourite);
}
if(is_user_logged_in()) {
$user = wp_get_current_user();
$user_id = $user->ID;
$user_added_fav = get_the_author_meta(\'stm_user_favourites\', $user_id );
if(!empty($user_added_fav)) {
$user_added_fav = explode(\',\', $user_added_fav);
$cars_in_favourite = $user_added_fav;
}
}
$car_already_added_to_favourite = \'\';
$car_favourite_status = esc_html__(\'Add to favorites\', \'motors\');
if(!empty($cars_in_favourite) and in_array(get_the_ID(), $cars_in_favourite)){
$car_already_added_to_favourite = \'active\';
$car_favourite_status = esc_html__(\'Remove from favorites\', \'motors\');
}
$show_favorite = get_theme_mod(\'enable_favorite_items\', true);
//Compare
$show_compare = get_theme_mod(\'show_listing_compare\', true);
$cars_in_compare = array();
if(!empty($_COOKIE[\'compare_ids\'])) {
$cars_in_compare = $_COOKIE[\'compare_ids\'];
}
$car_already_added_to_compare = \'\';
$car_compare_status = esc_html__(\'Add to compare\', \'motors\');
if(!empty($cars_in_compare) and in_array(get_the_ID(), $cars_in_compare)){
$car_already_added_to_compare = \'active\';
$car_compare_status = esc_html__(\'Remove from compare\', \'motors\');
}
/*Media*/
$car_media = stm_get_car_medias(get_the_id());
?>
<div class="stm-isotope-sorting" style="display: none;">
<?php while($listing->have_posts()):
get_template_part( \'partials/listing-cars/listing-list\', \'loop\' );
endwhile; ?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script>
$(document).ready(function() {
var markersInfo = $(\'.ia-card\').map(function() {
var info = {
id: $(this).data(\'map-id\'),
address: $(this).data(\'map-address\'),
title: $(this).data(\'map-title\'),
price: $(this).data(\'map-price\'),
latitude: $(this).data(\'map-latitude\'),
longitude: $(this).data(\'map-longitude\'),
html: "<img src=" + $(this).data(\'map-image\') + ">",
link: $(this).data("map-link"),
contentHtml: "<div class=\'image\'>" + "<img src=" + $(this).data(\'map-image\') + ">" + "</div>" + \'<b>\' + $(this).data(\'map-title\') + \'</b><br>\' + "<div class=\'changeprice\'><div style=\'display: none;\' class=\'currency-selector\'></div>" + $(this).data(\'map-price\') + "</div>" + "<br><a href=\'" + $(this).data("map-link") + "\'>More>></a>"
};
return info;
}).get();
var distinctMarkerInfo = [];
markersInfo.forEach(function(item) {
if (!distinctMarkerInfo.some(function(distinct) {
return distinct.id == item.id;
})) distinctMarkerInfo.push(item);
});
initGoogleMap(distinctMarkerInfo);
// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {
var mapOptions = {
// zoom: 2,
// center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
},
bounds = new google.maps.LatLngBounds(),
mapElement = document.getElementById(\'stm_map_results\'),
map = new google.maps.Map(mapElement, mapOptions);
markerList = []; // create an array to hold the markers
var geocoder = new google.maps.Geocoder();
var iconBase = \'http://throttlebuddies.com/wp-content/themes/motors/assets/images/\';
$.each(markersInfo, function(key, val) {
var marker = new google.maps.Marker({
//map: map,
position: {lat: parseFloat(val.latitude), lng: parseFloat(val.longitude)},
title: val.title,
icon: iconBase + \'single.png\',
info: new google.maps.InfoWindow({
content: val.contentHtml
})
});
markerList.push(marker); // add the marker to the list
google.maps.event.addListener(marker, \'click\', function() {
marker.info.open(map, marker);
});
loc = new google.maps.LatLng(val.latitude, val.longitude);
bounds.extend(loc);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
var markerCluster = new MarkerClusterer(map, markerList, {
imagePath: \'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m\'
});
};
});
</script>
<div id="stm_map_results" style="width:100%; height:600px;"></div>
<style>
.stm-isotope-sorting {
position: relative;
height: 600px !important;
}
</style>
但是，当我去掉以下代码时，页面加载良好。但我需要这些代码来填充地图。
<div class="stm-isotope-sorting" style="display: none;">
<?php while($listing->have_posts()):
get_template_part( \'partials/listing-cars/listing-list\', \'loop\' );
endwhile; ?>
</div>
