java + Api di google

[lugalzaggesi]

Buongiorno a tutti.
Farò una statua a chi potrà aiutarmi.
In pratica devo creare una mappa dinamica in Java che si appoggia alle Api di google.
Fino a questo punto non ci sono problemi....
Ipotizziamo che in questa mappa ci sono 20 negozi che vendono più di un oggetto scarpe, mele, patate, cipolle

Io vorrei porre un filtro sotto la mappa dove mi permette di visualizzare una o più caratteristiche.
A parer vostro come posso fare?
Grazie mille






var map;
var geocoder;


function loadMap() {
var xxxx = {lat: 2222, lng: 22222};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: xxxx
});

const ctaLayer = new google.maps.KmlLayer({
url: "http:/xxxxx.altervista.org/costruzione/zxz.kml",
map: map,
});


var cdata = JSON.parse(document.getElementById('data').innerHTML);
geocoder = new google.maps.Geocoder();
codeAddress(cdata);

var allData = JSON.parse(document.getElementById('allData').innerHTML);
showAllColleges(allData)
}

function showAllColleges(allData) {
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');

var strong = document.createElement('strong');
strong.textContent = data.id;
content.appendChild(strong);

content.appendChild(document.createElement('br'));

var strong1 = document.createElement('strong1');
strong1.textContent = data.name;
content.appendChild(strong1);

content.appendChild(document.createElement('br'));

var a = document.createElement('a');
var linkText = document.createTextNode("record");
a.appendChild(linkText);
a.title = "record";
a.href = ('record.php?page=')+data.id;
content.appendChild(a);




var img = document.createElement('img');
img.src = '';
img.style.width = '100px';
content.appendChild(img);

var iconBase = 'costruzione/coldmarker.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
icon: iconBase
});


marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
})
})
}

function codeAddress(cdata) {
Array.prototype.forEach.call(cdata, function(data){
var address = data.year;
geocoder.geocode( { 'name': address}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var points = {};
points.id = data.id;
points.lat = map.getCenter().lat();
points.lng = map.getCenter().lng();
updateCollegeWithLatLng(points);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
});
}

function updateCollegeWithLatLng(points) {
$.ajax({
url:"action.php",
method:"post",
data: points,
success: function(res) {
console.log(res)
}
})

}

 

[Max 1]