BACK

Simple Google Map with three Markers - Adjust zIndex

There are several solutions to the dense/overlapping marker problem. These solutions include:

In this example, we look at how user can change zIndex to reveal potentially hidden markers.



zIndex - All features are displayed on the map in order of their zIndex, with higher values displaying in front of features with lower values. Markers are always displayed in front of line-strings and polygons. 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title></title>    

	<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>	    	
	<script src="../jquery/jquery.js" type="text/javascript"></script> 
	
<style>

	body{
		padding:20px
		font-family: Arial;
		font-size: 16px;
	}
	#map-canvas{        
		height: 500px;
		width: 600px;        
	}
	pre {
		border:1px solid #D6E0F5;
		padding:5px;
		margin:5px;
		background:#EBF0FA;
	}	
	
	/* fix for unwanted scroll bar in InfoWindow */
	.scrollFix {
		line-height: 1.35;
		overflow: hidden;
		white-space: nowrap;
	}

</style>

<script type="text/javascript">
		
		"use strict";
		
		var markers = [];
		
		$( document ).ready(function() {
		
			// variable to hold a map
			var map;

			// variable to hold current active InfoWindow
			var activeInfoWindow;

			// ------------------------------------------------------------------------------- //
			// initialize function      
			// ------------------------------------------------------------------------------- //
			function initialize() {

				// map options - lots of options available here 
				var mapOptions = {
					zoom: 5,
					draggable: true,
					center: new google.maps.LatLng(44.960, -93.100),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				// create map in div called map-canvas using map options defined above
				map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
				
				// define three Google Map LatLng objects representing geographic points
				var stPaul 			= new google.maps.LatLng(44.95273,-93.08915);
				var minneapolis 	= new google.maps.LatLng(44.97994,-93.26630);
				var falconHeights 	= new google.maps.LatLng(44.9917,-93.1664);

				// place markers
				fnPlaceMarkers(stPaul,"St Paul",'icon-1.png');
				fnPlaceMarkers(minneapolis,"Minneapolis",'icon-2.png');	
				fnPlaceMarkers(falconHeights,"Falcon Heights",'icon-3.png');			
				
				// ------------------------------------------------------------------------------- //
				// LISTENERS
				// ------------------------------------------------------------------------------- //

				// on click of a href in infoWindow
				$( "#map-canvas" ).on( "click", "a", function( event ) {
					var seq = $(this).attr("data-seq");
					setMarkerBack(seq)
					return false;
				});
								
			}

			// ------------------------------------------------------------------------------- //
			// create markers on the map
			// ------------------------------------------------------------------------------- //
			function fnPlaceMarkers(myLocation, myCityName,myIcon) {
			
			var marker = new google.maps.Marker({
					position: myLocation,
					zIndex: Math.round(myLocation.lat()*-100000)<<5,
					  icon: myIcon
				});

				
				// Renders the marker on the specified map
				marker.setMap(map);
				var i = markers.length;
				
				// save marker
				markers.push(marker);
				
				// create an InfoWindow
				var infoWnd = new google.maps.InfoWindow();
				
				// add content to your InfoWindow
				infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '!<br/><br/>' +				
				'<a href="#" data-seq='+i+'>Click</a>' + ' to decrease marker\'s zIndex value. <br/>' +
				'This will move marker to the back of the group <br/>' +
				'zIndex is ' +marker.get('zIndex') + '<br/>' +
				'</div>');

				// add listener on InfoWindow - close last infoWindow  before opening new one 
				google.maps.event.addListener(marker, 'click', function(){

					//Close active window if exists - [one might expect this to be default behaviour no?]               
					if (activeInfoWindow != null) activeInfoWindow.close();

					// Open InfoWindow
					infoWnd.open(map, marker);

					// Store new open InfoWindow in global variable
					activeInfoWindow = infoWnd;
				});
			}

			// ------------------------------------------------------------------------------- //
			// set marker z-index back
			// ------------------------------------------------------------------------------- //       
			function setMarkerBack(i){
					var currentZ = markers[i].get('zIndex');
					markers[i].set('zIndex', currentZ-100000);								
					activeInfoWindow.close();
			}

			// ------------------------------------------------------------------------------- //
			// initial load
			// ------------------------------------------------------------------------------- //       
			google.maps.event.addDomListener(window, 'load', initialize);

	}); // end jquery

</script>


	
	<br/>  
		<div id="map-canvas"></div>
	<br/>