HTML & CSS Custom google map pin maker CMS tool help

[codingdog12345]

https://webflow.com/website/Google-Maps-with-Multiple-locations-and-CMS

I am using webflow and have a site where dynamic advertisements (images w/ links to customer website) use lat/long variable from those cards to drop pin makers in a google map.

It works really well, but the problem is that some of these advertisments are filler for the website, and I simply want to hide the google pin marker from showing on certain advertisements.

Below is a shareable Webflow link.

Webflow - Local Catholic Business Directory

preview.webflow.com

I am thinking I need to add somehwere in the code to "hide" the map marker IF (something like) lat/long variable are NULL?

Thanks so much!! If you have solution and want tip, let me know in PM.

[CODE title="map"]
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize&key=FAKECODEHERE" async defer></script>
<script>
// Variables for Google maps
var map, mapElem, markerImg, infoWindow, marker;
var markers = [], infoWindows = [];
var mapOptions = {
mapTypeId: 'roadmap',
//zoom: 13,
//scrollwheel: false,
options: {
gestureHandling: 'greedy'
}

};

function initialize() {
markerImg = {
url:'https://uploads-ssl.webflow.com/5eab390b83c5cae6af8ca9f9/5eed960d154958ff6001874a_cross%20pin.png',
size: new google.maps.Size(46, 57),
anchor: new google.maps.Point(23, 54),
}

// Display a map on the page
mapElem = document.getElementById('map_canvas');
map = new google.maps.Map(mapElem, mapOptions);
map.setTilt(45);

// Loop through our array of cars
for(i = 0; i < cars.length; i++) {
var car = cars;

// Generate an infowindow content for the marker
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(
'<a href="'+car.url+'"><div class="bg-pic-car" style="background:url('+car.photo+') center/cover no-repeat"></div></a>' +
'<center><a href="'+car.url+'"><p>'+car.name+'</p></a></center>'
);
infoWindows.push(infoWindow);

// Place a marker on the map
createMarker(car.lat, car.lng, i);
}

// Center the map fitting all markers on the screen
fitToMarkers();
}

function createMarker(x, y, i) {
marker = new google.maps.Marker({
map: map,
icon: markerImg,
position: new google.maps.LatLng(x,y),
title: cars.name
});
marker._index = i;
markers.push(marker);

// Click event on marker
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
// Close last opened infowindow if any
if(infoWindow) infoWindow.close();
// Open clicked infowindow
infoWindow = infoWindows;
infoWindow.open(map, marker);
}
})(marker, i));
}

function mapResize() {
google.maps.event.trigger(map, "resize");
fitToMarkers();
}

function fitToMarkers() {
map.setZoom(15);
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i < markers.length; i++) {
bounds.extend(markers.getPosition());
}
map.fitBounds(bounds);
map.setZoom(14); // zoom out when done so markers on the top can be seen
}

// When Webflow has loaded,
Webflow.push(function() {

// Resize event
$(window).resize(function() {

// Do nothing if mobile
if($(window).width() < 768) return;

// Resize map if function is defined
if(typeof mapResize === 'function') mapResize();
});
});
</script>[/CODE]