Google map marker change on external div hover

• aaronrobb

• January 31, 2022 at 10:31 am

I’ve got a post list with addresses on my site, with a google map with the same data beside it.
I’m trying to get my map’s markers to change when the associated external div is hovered.

I can get the below js code to run without error, but its not triggering the icon change.

What am I missing?

My marker init part:

function initMarker($marker, map, postID) {
    // Get position from marker.
    var lat = $marker.data("lat");
    var lng = $marker.data("lng");
    var latLng = {
      lat: parseFloat(lat),
      lng: parseFloat(lng),
    };

    // Create marker instance.
    var iconBase = "/wp-content/themes/lowtide/images/";
    var icon1 = iconBase + "icon.png";
    var icon2 = iconBase + "icon-grey.png";

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: icon1,
    });

    marker["sourceElement"] = $marker[0];

    // Append to reference for later use.
    map.markers.push(marker);

    // If marker contains HTML, add it to an infoWindow.
    if ($marker.html()) {
      // Create info window.
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html(),
      });

      infowindows.push(infowindow);

      google.maps.event.addListener(marker, "click", function () {
        //close all
        for (var i = 0; i < infowindows.length; i++) {
          infowindows[i].close();
        }

        infowindow.open(map, marker);
      });

      google.maps.event.addListener(map, "click", function () {
        infowindow.close();
      });
    }

    var listing = document.querySelector(".prop-" + postID);
    if (listing) {
      listing.addEventListener("mouseover", function () {
        marker.setIcon(icon2);
      });

      listing.addEventListener("mouseout", function () {
        marker.setIcon(icon1);
      });
    }
  }

And my external div looks like:

<div class="properties prop-<?php echo $post->ID; ?>