I have a page here:
URL: /
Password: vancouvertest
Which has a google map initialisation on it, if you scroll down you'll see there is a blank area on the right of a list of items.
For some odd reason its not initialiasing, i'm getting a Uncaught (in promise) InvalidValueError: st_initMap is not a function error instead. Unsure why, as its a carbon copy of whats appearing here: just with an ACF field to allow you to select which properties will appear.
I'm also having an issue where my posts that i've called through aren't counting correctly using the found_posts function, as this should appear where it says Showing – of properties within map area.
The ACF Field is just a basic text field and should be pulling through the slug for the taxonomy of the custom post type. It just allows the admin to type in the name of the slug and it should pull through the rest.
The PROPERTIES_PAGE_SIZE value is set to 20 in the wp-config.php file (this was done by another developer).
I've put the code for the beginning of the page here:
global $post;
$term = get_field('term_to_use');
if ( !defined( 'PROPERTIES_PAGE_SIZE' ) ) define( 'PROPERTIES_PAGE_SIZE', 20 );
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = PROPERTIES_PAGE_SIZE;
$args = array(
'post_type' => 'properties',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'post_status' => 'publish',
'paged' => $paged,
'tax_query' => array(
array(
'taxonomy' => 'location',
'field' => 'slug',
'terms' => $term,
'operator' => 'IN'
),
),
);
$mapproperty = new WP_Query( $args );
$count = $mapproperty->post_count;
$total_results = $mapproperty->found_posts;
$total_pages = ceil($total_results / $posts_per_page);
$map_locations = [];
$city_id = '';
$current_city = esc_html(get_field('google_location', $city_id));
Then there is an if statement here:
if ( $mapproperty->have_posts() ):
$property_data = [];
$property_data_cache = false; //comment out on live site to enable cache
while( $mapproperty->have_posts() ) {
$mapproperty->the_post();
$id = get_the_ID();
This is pulling the correct data into the right hand list (though its not paginating which is another issue).
The google maps is set to Init here at the bottom of the php file:
function st_initMap() {
const styledMapType = new google.maps.StyledMapType(
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#404040"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#a75627"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"saturation": -50
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffcaa6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a75728"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
)
map = new google.maps.Map(document.getElementById('locations-map'), {
zoom: zoom,
center: center,
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map'],
mapTypeControl: false,
streetViewControl: false,
rotateControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
fullscreenControl: false,
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId("styled_map");
// Attach an event listener to run once the map tiles are loaded.
google.maps.event.addListenerOnce(map, 'idle', function() {
// Once the map is fully loaded, set the markers on the map.
st_setMarkers(map, js_locations);
});
}
</script>
<script defer src="=<?php echo ST_GMAPS_KEY; ?>&callback=st_initMap&loading=async&libraries=places" type="text/javascript"></script>
<div id="locations-map" class="property__map__container"></div>
The ST_GMAPS_KEY is also being called from the wp-config.php file (again by the other developer). I've tried putting this in manually instead and it makes no difference. Also tried removing the libraries=places and the defer and async too.. nothing seems to make a difference to the init.
Any guidance or help to fix this issue would be greatly appreciated.
Many Thanks
Chris
I have a page here:
URL: https://hscr/short-term-rentals-vancouver-2/
Password: vancouvertest
Which has a google map initialisation on it, if you scroll down you'll see there is a blank area on the right of a list of items.
For some odd reason its not initialiasing, i'm getting a Uncaught (in promise) InvalidValueError: st_initMap is not a function error instead. Unsure why, as its a carbon copy of whats appearing here: https://hscr/properties just with an ACF field to allow you to select which properties will appear.
I'm also having an issue where my posts that i've called through aren't counting correctly using the found_posts function, as this should appear where it says Showing – of properties within map area.
The ACF Field is just a basic text field and should be pulling through the slug for the taxonomy of the custom post type. It just allows the admin to type in the name of the slug and it should pull through the rest.
The PROPERTIES_PAGE_SIZE value is set to 20 in the wp-config.php file (this was done by another developer).
I've put the code for the beginning of the page here:
global $post;
$term = get_field('term_to_use');
if ( !defined( 'PROPERTIES_PAGE_SIZE' ) ) define( 'PROPERTIES_PAGE_SIZE', 20 );
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = PROPERTIES_PAGE_SIZE;
$args = array(
'post_type' => 'properties',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'post_status' => 'publish',
'paged' => $paged,
'tax_query' => array(
array(
'taxonomy' => 'location',
'field' => 'slug',
'terms' => $term,
'operator' => 'IN'
),
),
);
$mapproperty = new WP_Query( $args );
$count = $mapproperty->post_count;
$total_results = $mapproperty->found_posts;
$total_pages = ceil($total_results / $posts_per_page);
$map_locations = [];
$city_id = '';
$current_city = esc_html(get_field('google_location', $city_id));
Then there is an if statement here:
if ( $mapproperty->have_posts() ):
$property_data = [];
$property_data_cache = false; //comment out on live site to enable cache
while( $mapproperty->have_posts() ) {
$mapproperty->the_post();
$id = get_the_ID();
This is pulling the correct data into the right hand list (though its not paginating which is another issue).
The google maps is set to Init here at the bottom of the php file:
function st_initMap() {
const styledMapType = new google.maps.StyledMapType(
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#404040"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#a75627"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"saturation": -50
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffcaa6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a75728"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
)
map = new google.maps.Map(document.getElementById('locations-map'), {
zoom: zoom,
center: center,
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map'],
mapTypeControl: false,
streetViewControl: false,
rotateControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
fullscreenControl: false,
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId("styled_map");
// Attach an event listener to run once the map tiles are loaded.
google.maps.event.addListenerOnce(map, 'idle', function() {
// Once the map is fully loaded, set the markers on the map.
st_setMarkers(map, js_locations);
});
}
</script>
<script defer src="https://maps.googleapis/maps/api/js?key=<?php echo ST_GMAPS_KEY; ?>&callback=st_initMap&loading=async&libraries=places" type="text/javascript"></script>
<div id="locations-map" class="property__map__container"></div>
The ST_GMAPS_KEY is also being called from the wp-config.php file (again by the other developer). I've tried putting this in manually instead and it makes no difference. Also tried removing the libraries=places and the defer and async too.. nothing seems to make a difference to the init.
Any guidance or help to fix this issue would be greatly appreciated.
Many Thanks
Chris
Share Improve this question edited 2 days ago Tom J Nowell♦ 60.9k7 gold badges78 silver badges147 bronze badges asked 2 days ago Chris MitchellChris Mitchell 11 bronze badge 5 |1 Answer
Reset to default 0Found the issue. Needed to make all the calls for the js etc out of the Gutenberg builder as it was parsing it incorrectly.
uc.jsbut it appears it's unrelated to your question it – Tom J Nowell ♦ Commented yesterday