Support

Account

Home Forums Front-end Issues Show marker on div hover outside the acf-map

Solved

Show marker on div hover outside the acf-map

  • Hello there. I am using ACF Google maps on my category page and I want to be able to show the info window when I hover on a post container. This is my code so far:

    function add_marker( $marker, map, postID ) {
    
    	// var
    	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    
    	// create marker
    	var marker = new google.maps.Marker({
    		position	: latlng,
    		map			: map
    	});
    
    	// add to array
    	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()
    		});
    
    		// show info window when marker is clicked
    		google.maps.event.addListener(marker, 'mouseover', function() {
    
    			infowindow.open( map, marker );
    
    		});
    
    		google.maps.event.addListener(marker, 'mouseout', function() {
    
    			infowindow.close();
    
    		});
    
    		google.maps.event.addListener(______, 'mouseover', function() {
    			infowindow.open( map, marker );
    		});
    
    	}
    }

    As you can see I am passing the post id in the add_marker function. The div that i want to attach a listener looks like this, considering the postID:

    var listing = '#post-' +postID+ ' .card .card-img-overlay';

    Finally in the _____ on the last listener I am a bit confused on how should I pass the element that should be listened. Sorry, my js game in not that great.

  • OK guys, me being impatient to wait for an answer found a solution, so I’m just gonna paste it here for anyone else running into something like this. It was simple really, I just didn’t realize since I rely too much on jQuery sometimes. Here:

    var listing = document.querySelector('.card-' +postID);
    
    listing.addEventListener('mouseover', function() {
    	infowindow.open( map, marker );
    });
    
    listing.addEventListener('mouseout', function() {
    	infowindow.close();
    });
  • @amirami Does this still work for you?
    I’m getting the error “Uncaught TypeError: listing.addEventListener is not a function

    Plus with your code, how do you target the correct marker to open?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.