• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Custom google map pin maker CMS tool help

codingdog12345

New Coder
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.


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.

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[i];

    // 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[i].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[i];
      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[i].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>
 
Top