Selecting Google Maps markers programatically

gmaps.js

/*
 * At first sight, it might seem impossible to target markers on Google Maps because of recent changes Google made to optimize them.
 *
 * In this example its shown how to populate your map with custom markers that have a dynamic (yet fake) ID appended to their `src` which, when used with the `optimized: false`, creates a unique DOM element, that you can then target with jQuery.
 *
 */

var marker, i;

var locations = [['Seattle','United States',47.6062095,-122.3320708,'01'],['San Jose','United States',37.3382082,-121.8863286,'02'],['Los Angeles','United States',34.0522342,-118.2436849,'03'],['Dallas','United States',32.7766642,-96.7969878,'04'],['San Antonio','United States',29.4241219,-98.4936282,'05'],['Chicago','United States',41.8781136,-87.629798,'06'],['Washington DC','United States',38.9071923,-77.0368707,'07'],['Newark','United States',40.735657,-74.1723667,'08'],['Miami','United States',25.7616798,-80.1917902,'09'],['Sao Paulo','Brazil',-23.5505199,-46.6333094,'10'],['London','United Kingdom',51.5073509,-0.12775829,'11'],['Amsterdam','Netherlands',52.3702157,4.89516789,'12'],['Frankfurt','Germany',50.110922,8.6821267,'13'],['Hong Kong','Hong Kong',22.396428,114.109497,'14'],['Tokyo','Japan',35.6894875,139.6917063,'15'],['Sydney','Australia',-33.8674869,151.2069902,'16'],['Singapore','Singapore',1.352083,103.8198360,'17']];

function initMap() {
	var map = new google.maps.Map( document.getElementById( 'map' ), {
		zoom: 2,
		center: { lat: 23.492, lng: 12.355 }
	} );

	for ( i = 0; i < locations.length; i++ ) { 
		marker = new google.maps.Marker({
			map: map,
			flat: true,
			clickable: false,
      			// optimized param must be set to false, to prevent markers being created on a single canvas layer
			optimized: false,
      			// dynamically add a UID to every marker
			icon: new google.maps.MarkerImage( "http://dev.keoshi.com/a8c/gmaps/marker-01.png?mrkr=" + locations[i][4], null, null, null, new google.maps.Size( 20,27 ) ),
			position: {lat: locations[i][2], lng: locations[i][3]}
		});
	};
};

var range = 3,
	loop = 0,
	time = 3500,
	fade = .5,
	locationsCount = locations.length,
	groupsCount = Math.round( locationsCount / range );

function getGroup( loop ) {
	var multiplier = loop > 0 ? range * loop : 0;
	var group = Array.apply(0, Array( range )).map(function(_,b) { return  b + multiplier; });
	animateMap( group );
}

function animateMap( group ) {
	var locs = [];
	for ( var i in group ) {
		var index = group[i];
		if ( locations[index] ) {
			// Select Markers
			locs.push( 'img[src*="mrkr=' + locations[index][4] +'"]' );
		}
	}
	// Animate Markers
	jQuery( 'img[src*="mrkr"]' ).stop().animate( {opacity: fade } );
	jQuery( locs.toString() ).stop().animate( {opacity: 1 } );
}

function init() {
	setInterval(function(){
		if ( loop === groupsCount ) {
			loop = 0;
		}
		getGroup( loop );
		loop++;
	}, time );
}
init();