Bring Google Map Markers to Front on Hover

February 21st, 2012 - Posted by Steve Marks to Javascript / jQuery, Web Development.

When placing markers onto a map using the Google Maps V3 API they will be placed from front-to-back based on their lat/lng. This is normally fine but can cause a problem when there are lots of overlapping markers congregated together, or when the user is viewing the map at a lower zoom level, at which point it can be tricky to select certain markers that have been pushed back.

As a result of the above I needed a way to bring markers to the front when the user hovered their mouse over them. I’ve included the code below but first let’s start with a demonstration of the problem faced and how the code helps:

Try rolling over the markers and you’ll see that the one to the rear will come to the front. This isn’t just limited to two markers either. It will work regardless of the number of markers shown on the map.

Ok, so onto the code:

var map;
// array of markers added to the map
// used at a later date
var markers = new Array();
// a global variable used to store the highest zIndex
// saves calculating it repeatedly 
var highestZIndex = 0;

function initialize() {

	/* SETUP MAP */
	var myLatlng = new google.maps.LatLng(52.06768, -1.33758);
	var mapOptions = {
		center: myLatlng,
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	
	/* ADD 1st MARKER */
	var markerOptions = {
		position: new google.maps.LatLng(52.06768, -1.32058), 
		map: map,
		zIndex:1 // important!
	};
	var marker = new google.maps.Marker(markerOptions);
	markers.push(marker);
	// assign a custom variable to this marker containing the zIndex
	marker.set("myZIndex", marker.getZIndex());
	
	// add mouseover and mouseout events to first marker
	google.maps.event.addListener(marker, "mouseover", function() {
		getHighestZIndex();
		this.setOptions({zIndex:highestZIndex});
	});
	google.maps.event.addListener(marker, "mouseout", function() {
		this.setOptions({zIndex:this.get("myZIndex")});
	});
	
	/* ADD 2nd MARKER */
	var markerOptions = {
		position: new google.maps.LatLng(52.06768, -1.33758), 
		map: map,
		zIndex:2 // important!
	};
	var marker = new google.maps.Marker(markerOptions);
	markers.push(marker);
	// assign a custom variable to this marker containing the zIndex
	marker.set("myZIndex", marker.getZIndex());
	
	// add mouseover and mouseout events to second marker
	google.maps.event.addListener(marker, "mouseover", function() {
		getHighestZIndex();
		this.setOptions({zIndex:highestZIndex+1});
	});
	google.maps.event.addListener(marker, "mouseout", function() {
		this.setOptions({zIndex:this.get("myZIndex")});
	});
	
}

function getHighestZIndex() {
	
	// if we haven't previously got the highest zIndex
	// save it as no need to do it multiple times
	if (highestZIndex==0) {
		if (markers.length>0) {
			// loop through markers
			for (var i=0; i<markers.length; i++) {
				tempZIndex = markers[i].getZIndex();
				// if this zIndex is the highest so far
				if (tempZIndex>highestZIndex) {
					highestZIndex = tempZIndex;
				}
			}
		}
	}
	return highestZIndex;
	
}

One important thing to note regarding the above is that markers must have a zIndex option set, either by specifying it when adding the marker initially or by using the setOption() function. Without a zIndex, the function getZindex() will return ‘undefined’.

This entry was posted on Tuesday, February 21st, 2012 at 8:46 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first