I need to get a list of markers in the zoomed area in Google Maps.
I've checked out this other question: Get a list of markers in bounds of google map using markerclusterer v3
Which is close to what i want, but not exactly the same.
This is my JavaScript to generate the map
$('#autocomplete').click(function() {
$(this).val('');
$(this).attr('placeholder', '');
});
var map, places, infoWindow;
var markers = [];
var autocomplete;
var countryRestrict = {
'country': 'dk'
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 56.220512,
lng: 11.245051
},
mapTypeControl: false,
panControl: true,
zoomControl: true,
streetViewControl: false
});
autocomplete = new google.maps.places.Autocomplete(
(
document.getElementById('autocomplete')), {
componentRestrictions: countryRestrict
});
places = new google.maps.places.PlacesService(map);
autocomplete.addListener('place_changed', onPlaceChanged);
setMarkers(map);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
event.preventDefault();
}
if (place.geometry.viewport) {} else {
map.setCenter(place.geometry.location);
map.setZoom(10);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
var beaches = [
<?php while ( have_rows('tilfoj_vaerksted_repeater') ) : the_row(); ?>
['test', <?php the_sub_field('latitude_tilfoj_vaerksted_repeater'); ?>, <?php the_sub_field('longitude_tilfoj_vaerksted_repeater'); ?>, 4],
<?php endwhile; ?>
];
function setMarkers(map) {
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {
lat: beach[1],
lng: beach[2]
},
map: map,
icon: "/wp-content/uploads/2019/03/map-icon.png",
});
}
}
function onPlaceChanged() {
var place = autocomplete.getPlace();
if (place.geometry) {
map.panTo(place.geometry.location);
map.setZoom(10);
} else {
document.getElementById('autocomplete').placeholder = 'Søg';
}
}
What i exactly need is to get all markers in the searched area within the Google Maps and then hide/show the div elements below the Google Map. You can see the current example in the link below. I think i can use Markercluster but i'm not quite sure how to do this.
This is a link to the production site:
I found a solution which works perfectly.
function showVisibleMarkers() {
var bounds = map.getBounds(),
count = 0;
for (var i = 0; i < markers.length; i++) {
var marker = markers[i], // array indexes start at zero, but not our class names :)
infoPanel = jQuery('.workplace' + (i)); // array indexes start at zero, but not our class names :)
if (bounds.contains(marker.getPosition()) === true) {
infoPanel.show();
count++;
} else {
infoPanel.hide();
}
}
}
function setMarkers(map) {
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i],
myLatLng = new google.maps.LatLng(beach[1], beach[2]),
marker = new google.maps.Marker({
position: myLatLng,
title: beach[0],
icon: "/wp-content/uploads/2019/03/map-icon.png",
});
marker.setMap(map);
markers.push(marker);
}
}