I am working on a mobile web app that features a mapping page where users can toggle different POI's, such as Gas Stations. The issue I am facing is when the google.maps.places.PlacesService does not find any Gas Stations within my specified radius, I struggle to revert the CSS changes for toggling off. I'm unsure of where or how to implement a condition for handling this scenario when the marker set returns empty. Should it be in the clearMarkers function or somewhere else?
//Gas
var gas_markers = null;
function gas() {
if (gas_markers === null) {
document.getElementById('gas').style.backgroundColor = "rgb(175,175,175)";
document.getElementById('gas').style.borderColor = "black";
document.getElementById('gas').style.color = "rgb(75,75,75)";
var request = {
location: arena,
radius: 3500,
type: ["gas_station"]
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
if (gas_markers === null) gas_markers = [];
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
} else {
clearMarkers();
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var gas_marker = new MarkerWithLabel({
position: place.geometry.location,
draggable: false,
raiseOnDrag: false,
map: map,
icon: "images/gas1.png",
labelContent: "",
labelAnchor: new google.maps.Point(10, 0),
labelClass: "pin",
labelStyle: {
opacity: 0.95
}
});
gas_markers.push(gas_marker);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(gas_marker, 'click', function () {
infowindow.setContent('Promo Code: <br> Gas');
infowindow.open(map, this);
});
}
} else {
clearMarkers();
document.getElementById('gas').style.backgroundColor = "rgb(75,75,75)";
document.getElementById('gas').style.borderColor = "gray";
document.getElementById('gas').style.color = "rgb(175,175,175)";
gas_markers = null;
}
function clearMarkers() {
for (var i = 0; i < gas_markers.length; i++) {
gas_markers[i].setMap(null);
}
gas_markers = [];
}
}
//End of Gas function
When the request returns no results and gas_markers becomes null, it exits the IF statement making it difficult to toggle off. Any assistance on how to handle this situation would be greatly appreciated. Thank you.