${item.address}
${item.segment}
${item.phone}
${item.email}
`
}
const addMarker = (item) => {
const svgMarker = {
path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z",
fillColor: "#EA4335",
fillOpacity: 1,
strokeWeight: 0,
scale: 0.07,
anchor: new google.maps.Point(200, 550),
};
const marker = new google.maps.Marker({
position: {
lat: Number(item.lat),
lng: Number(item.lng)
},
map,
optimized: true,
icon: svgMarker,
})
const infowindow = new google.maps.InfoWindow({
content: contentString(item),
});
marker.addListener("click", () => {
closeOtherInfo();
infowindow.open({
anchor: marker,
map,
shouldFocus: false,
});
InforObj[0] = infowindow;
});
markers.push(marker);
}
function setMapOnAll(map) {
for (let i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
if (marker)
marker.setMap(null)
}
const fetchData = async (filter) => {
let data = new FormData();
data.append("filter", filter)
const response = await fetch('filtermap.php', {
method: "POST",
body: data
})
const elements = await response.json();
// reset google maps state
map.setCenter({
lat: -18.5481643,
lng: -46.8804391
})
map.setZoom(5.5)
setMapOnAll(null)
elements.map(item => {
const svgMarker = {
path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z",
fillColor: "#1f5433",
fillOpacity: 1,
strokeWeight: 0,
scale: 0.07,
anchor: new google.maps.Point(200, 550),
};
if (marker)
marker.setMap(null)
marker = new google.maps.Marker({
position: {
lat: Number(item.lat),
lng: Number(item.lng)
},
map,
optimized: true,
icon: svgMarker,
});
const infowindow = new google.maps.InfoWindow({
content: contentString(item)
});
marker.addListener("click", () => {
closeOtherInfo();
infowindow.open({
anchor: marker,
map,
shouldFocus: false,
});
InforObj[0] = infowindow;
});
addMarker(item);
});
}
const onChange = async (evt) => {
await fetchData(evt.target.value)
}
window.onload = () => {
const input = document.getElementById('search-input');
input.addEventListener('input', onChange, false);
}