Home Forums General Issues Google map marker change on external div hover


Google map marker change on external div hover

  • 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 = $"lat");
        var lng = $"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.
        // If marker contains HTML, add it to an infoWindow.
        if ($marker.html()) {
          // Create info window.
          var infowindow = new google.maps.InfoWindow({
            content: $marker.html(),
          google.maps.event.addListener(marker, "click", function () {
            //close all
            for (var i = 0; i < infowindows.length; i++) {
  , marker);
          google.maps.event.addListener(map, "click", function () {
        var listing = document.querySelector(".prop-" + postID);
        if (listing) {
          listing.addEventListener("mouseover", function () {
          listing.addEventListener("mouseout", function () {

    And my external div looks like:

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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.